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

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 :

Selecteur	Utilisation	Ecriture HTML	Ecriture CSS
Identifiant	Unique	id="truc"	#truc
Class	Multiple	class="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;

Merci beaucoup pour le tuto

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

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

Merci Fu !

Merci Fu'!

Merci Fu pour le tuto

Merci pour le tuto !

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

Rhaa, merci, j'ai toujours rêvé de savoir comment faire ça !!

Avec plaisir

Spoiler:

Han merci, c'est génial !