communauté francophone de joueurs sims
 
AccueilAccueil  Le site  Chaine You Tube  S'enregistrerS'enregistrer  ConnexionConnexion  FAQFAQ  RechercherRechercher  

Partagez | 
 

 [Apprenti] Créer un bouton avec un effet de survol

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Admin
avatar
Fuyaya
Admin
Féminin Date d'inscription : 29/09/2009
Age : 38
Localisation : Aubais

MessageSujet: [Apprenti] Créer un bouton avec un effet de survol   Sam 18 Aoû 2012, 12:42

Bonjour,

Nous allons voir comment créer un bouton avec un effet de survol en utilisant uniquement du HTML et du CSS. Si vous ne savez pas ce que c'est alors il est temps de lire [Fiche] HTML et CSS qu'est-ce que c'est ?

Un bouton avec un effet de survol, c'est tout simplement un bouton qui change lorsque l'on passe la souris dessus.

Pour suivre ce tuto vous devez avoir la possibilité de faire deux choses sur votre site/blog/forum :
1. Ajouter du code HTML (là où le bouton doit apparaître)
2. Ajouter du code CSS (feuille de style)

1. De quoi a-t-on besoin pour commencer ?

Il va donc falloir dans un premier temps que vous trouviez sur votre support l'endroit où l'on peut modifier la feuille de style et la fonction pour ajouter du code HTML. Pour l'avoir déjà fait pour Maripiou, je sais que l'on peut le faire avec Jimdo, c'est aussi le cas des blogs. Si vous créez votre propre site alors cela va de soit.

Il nous faut donc également des boutons, en fait il en faut deux. Pour l'exemple j'ai créé des boutons très simples avec une grosse différence pour que ce soit facile à constater. A vous de laisser parler votre créativité en y rajoutant des éléments.

- le bouton que l'on voit lorsque l'on ne fait rien :

Adresse du bouton :
Code:
[img]https://dl.dropbox.com/u/65254322/Tutoriels/info_bouton_survol/btn.png[/img]

- le bouton que l'on voit lorsque l'on passe la souris dessus :

Adresse du bouton :
Code:
[img]https://dl.dropbox.com/u/65254322/Tutoriels/info_bouton_survol/btn_hover.png[/img]

2. Ecriture du code HTML

Afin de commander ce bouton nous allons devoir lui donner un nom, ce nom nous servira ensuite à le commander via la feuille CSS, c'est ce que l'on appelle un sélecteur

Il y a deux types de sélecteurs :
SelecteurUtilisation Ecriture HTML Ecriture CSS
IdentifiantUnique id="truc" #truc
Class Multipleclass="truc" .truc
On va donc choisir le type de sélecteur selon l'utilisation que l'on va en faire. Si le bouton doit apparaître plusieurs fois sur la même page son utilisation est multiple autrement elle est unique.

Je vais choisir de nommer mon bouton exemple et une utilisation unique et voici donc le code HTML

Code:
<a id="exemple" href="lien" target="_blank"> </a>

La balise <a></a> est spécifique à la création d'un lien
J'ai rajouté target="_blank" afin d'indiquer que le lien cible doit s'ouvrir dans un nouvel onglet et non pas à la place de la page ouverte

Bien entendu là où j'ai indiqué lien, vous devez mettre l'adresse URL vers lequel votre lien pointe !

A cette étape le lien est invisible, en effet je n'ai pas mis de texte dedans car je ne souhaite utiliser qu'une image. En revanche pour contrer certains blog capricieux j'ai tout de même rajouter &nbsp; qui est le code qui correspond à un espace

3. Ecriture du code CSS

Le code CSS c'est ce qui va commander l'apparence du lien et son comportement.

Un lien par défaut est de type inline cela veut dire qu'il va s'intégrer au contenu comme un mot s'intègre à une phrase.
Dans notre cas nous voulons agir sur ce lien comme s'il était un élément distinct, c'est à dire un block. Les éléments de type bloc sont indépendant, ils peuvent avoir des marges intérieures et extérieures, un arrière plan, etc...

C'est ce qui nous intéresse car nous voulons que notre lien soit une image, nous allons donc modifier la nature du lien pour avoir les avantages d'un block et les avantages d'un lien.
En effet chaque nature ou type d'éléments a ses propres attributs, des propriétés CSS qui permettent de modifier le comportement de celui-ci ou son design.

Ainsi les liens ont comme attributs celui de pouvoir modifier leur aspects selon le comportement de la souris. L'attribut correspondant au survol de la souris est donc hover

Voyons à présent le code, on commence par la ligne qui va indiquer le comportement du bouton lorsqu'on ne le survole pas. Pour que ce soit plus lisible je vais revenir à la ligne pour chaque instruction.

Code:
#exemple {
     display: block;
     background : url('https://dl.dropbox.com/u/65254322/Tutoriels/info_bouton_survol/btn.png') no-repeat top left;
     width : 88px;
     height: 31px;
}
- display : j'indique que sa nature doit être de type block
- background : je donne différentes instructions sur l'arrière plan, l'adresse de mon image puis le fait qu'elle ne doit pas se répéter (no-repeat) enfin qu'elle doit être calé en haut et à gauche
- width : j'indique la largeur de mon bouton
- height : j'indique la hauteur de mon bouton

On pourrait rajouter d'autres commandes à cette liste selon si on ajoute du texte au bouton met dans mon cas je n'ai rien mis au niveau du lien.

A présent la ligne qui va indiquer ce qu'il se passe quand on survole le bouton :
Code:
#exemple:hover {
     background : url('https://dl.dropbox.com/u/65254322/Tutoriels/info_bouton_survol/btn_hover.png') no-repeat top left;
}

- Ajout de l'attribut hover lié au sélecteur par :
- Background : j'indique l'image de fond à utilisé lorsque l'on survol le bouton

Notez que je n'ai pas répété les propriétés qui ne doivent pas changer.

Ce qui nous donne donc :

&nbsp;

Voilà fin de ce tuto, en espérant qu'il vous soit utile


Note : si vous avez décidé de ne pas mettre de texte et qu'au survol de votre bouton apparaît un petit tiret, c'est tout simplement parce que par défaut sur votre site les liens sont souligné lorsque l'on passe la souris dessus.
Pour contrer cela dans la ligne de CSS qui donne les instructions pour le hover rajouté l'instruction :

Code:
 text-decoration: none!important;


MODE D'EMPLOI

N'hésitez pas à remercier l'auteur de ce tutoriel ou à faire partager votre expérience personnelle. Si vous avez créé quelque chose en suivant le tuto pourquoi pas la poster afin de la montrer à l'auteur

-----------------------------------------

Pour d'éventuelles questions, c'est par ici et si vous souhaitez en apprendre plus sur le sujet, rendez-vous dans la salle travaux pratiques

Bonne journée



Spoiler:
 


Dernière édition par Fuyaya le Sam 11 Jan 2014, 22:41, édité 2 fois
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
As de l'acrylique
avatar
Sucréomiel
As de l'acrylique
Féminin Date d'inscription : 03/01/2010
Age : 23
Localisation : Imaginarium

MessageSujet: Re: [Apprenti] Créer un bouton avec un effet de survol   Sam 18 Aoû 2012, 17:59

Merci beaucoup pour le tuto
Revenir en haut Aller en bas
Moderateur
avatar
Caco
Moderateur
Féminin Date d'inscription : 22/07/2010
Age : 29
Localisation : Yvelines (78)

MessageSujet: Re: [Apprenti] Créer un bouton avec un effet de survol   Sam 18 Aoû 2012, 21:56

Merci c'est un outil de plus pour les webmasters en herbe Smile




::♥☼♥::
 
Revenir en haut Aller en bas
Ange gardien
avatar
pomme-kiwi
Ange gardien
Féminin Date d'inscription : 27/09/2009
Age : 31

MessageSujet: Re: [Apprenti] Créer un bouton avec un effet de survol   Mer 22 Aoû 2012, 09:43

Merci Fu pour le tutoriel! Je me souviens avoir galéré avec ça au début.


Revenir en haut Aller en bas
http://www.dressingresponsable.com
Ange gardien
avatar
Bettyboopjade
Ange gardien
Féminin Date d'inscription : 25/03/2011
Age : 36
Localisation : Mons (Belgique)

MessageSujet: Re: [Apprenti] Créer un bouton avec un effet de survol   Mer 22 Aoû 2012, 11:17

Merci Fu !
Revenir en haut Aller en bas
http://bettyboopjade.canalblog.com/
Ange gardien
avatar
idjya
Ange gardien
Féminin Date d'inscription : 05/10/2009
Age : 39
Localisation : Cholet

MessageSujet: Re: [Apprenti] Créer un bouton avec un effet de survol   Mer 22 Aoû 2012, 13:29

Merci Fu'! Wink
Revenir en haut Aller en bas
http://idjya.eklablog.com
Grand artiste du pinceau
avatar
Camelya
Grand artiste du pinceau
Féminin Date d'inscription : 06/05/2011
Age : 27
Localisation : Dans mon lit.

MessageSujet: Re: [Apprenti] Créer un bouton avec un effet de survol   Mer 22 Aoû 2012, 17:16

Merci Fu pour le tuto Wink
Revenir en haut Aller en bas
http://legrenierdetatacamy.jimdo.com/
Maitre en Création de CC
avatar
Maman Gateau
Maitre en Création de CC
Féminin Date d'inscription : 25/04/2010
Age : 47
Localisation : Nord

MessageSujet: Re: [Apprenti] Créer un bouton avec un effet de survol   Mer 22 Aoû 2012, 21:07

Merci pour le tuto !



La créativité est une drogue dont je ne peux me passer
(Cecil B. DeMille)
Revenir en haut Aller en bas
http://www.choco-lova-sims.com/
Débutant des galeries d'art
avatar
Minaya
Débutant des galeries d'art
Féminin Date d'inscription : 30/11/2009
Age : 104
Localisation : Sur mon fauteuil

MessageSujet: Re: [Apprenti] Créer un bouton avec un effet de survol   Jeu 23 Aoû 2012, 09:46

Merci pour le tuto Fu ! C'est vrai qu'une technique en CSS pour les blogs c'est ce qu'il y a de mieux Smile
Revenir en haut Aller en bas
http://minaya.ek.la
Grand artiste du pinceau
avatar
Lehanna
Grand artiste du pinceau
Féminin Date d'inscription : 07/10/2011
Age : 21
Localisation : Nord (59)

MessageSujet: Re: [Apprenti] Créer un bouton avec un effet de survol   Ven 24 Aoû 2012, 14:22

Rhaa, merci, j'ai toujours rêvé de savoir comment faire ça !! Very Happy
Revenir en haut Aller en bas
http://lesharpburn.canalblog.com
Admin
avatar
Fuyaya
Admin
Féminin Date d'inscription : 29/09/2009
Age : 38
Localisation : Aubais

MessageSujet: Re: [Apprenti] Créer un bouton avec un effet de survol   Sam 25 Aoû 2012, 23:17

Avec plaisir

Spoiler:
 


Spoiler:
 
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
As de l'acrylique
avatar
Naine
As de l'acrylique
Féminin Date d'inscription : 14/01/2012
Age : 25
Localisation : Ici : x

MessageSujet: Re: [Apprenti] Créer un bouton avec un effet de survol   Lun 03 Sep 2012, 10:29

Han merci, c'est génial ! cheers
Revenir en haut Aller en bas
Illustre illustrateur
avatar
Cassie
Illustre illustrateur
Féminin Date d'inscription : 23/04/2011
Age : 19

MessageSujet: Re: [Apprenti] Créer un bouton avec un effet de survol   Sam 19 Jan 2013, 15:57

Merci beaucoup pour ce tuto Fu' ! Very Happy


Dernière édition par Fuyaya le Dim 20 Jan 2013, 12:00, édité 1 fois (Raison : Nettoyé pour les question cf. reglement)
Revenir en haut Aller en bas
Contenu sponsorisé


MessageSujet: Re: [Apprenti] Créer un bouton avec un effet de survol   

Revenir en haut Aller en bas
 
[Apprenti] Créer un bouton avec un effet de survol
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» [Question] Anti-combo Galadriel avec Arwen - effet passif optionnel ? [Résolu]
» Effet Flip (RYKO) contre Effet destruction (Kuraz)
» Quelle est le panda le mieux approprié avec un feca?
» Duo avec un Panda
» Souci avec les spoilers !

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Sims Artists :: Apprentissage :: Informatique et Internet :: HTML / CSS-
Sauter vers: