Gabriel-Rambault.fr

Sommaire

Dessine-moi un bouton !
Création de boutons avec HTML5 et CSS3

Nous allons voir comment dessiner des boutons avec HTML5 et CSS3.
Ces boutons aurons l'apparence d'une image et changeront d'aspect au passage de la souris,
mais il n'utiliseront pas de fichier image qui demande du temps à télécharger.

Lien ordinaire en texte :
Affichage d'une plume

Le même lien en bouton :
Affichage d'une plume

Prérequis :

Il est supposé que vous connaissez le HTML et le CSS.
Nous utilisons Notepad++ pour écrire notre programme.

1 - Ecrivons d'abord la commande à éxécuter :

<p><a href="images/divers/plume.png" alt="Affichage d'une plume d'oie d'écrivain." title="Affichage d'une plume d'oie d'écrivain." >Affichage d'une plume</a></p>

Lien cliquable de base :
Affichage d'une plume

Dans cet exemple, si vous passez votre souris sur la ligne ci-dessus, elle change de couleur et en cliquant, vous déclenchez l'affichage de la plume d'oie.
Essayez !

Il y a juste le "souligné" sous le texte et les caractères en gras pour vous indiquer qu'il s'agit d'un lien cliquable.

Le but de ce tuto est justement de transformer ce texte en bouton, ce qui serait plus évident à utiliser.

2 - Nous avions en écriture css :

article a
{
color: #8b4513;
font: 1em Arial, Helvetica, sans-serif;
text-decoration: none;
border-bottom: 3px dotted #f4a460;
font-weight: bold;
}
article a.:hover
{
color: #FFF;
background-color: #f4a460;
}

3 - Modifions la ligne de commande que nous avons écrite en 1

<p><a class="blc220 bouton" href="images/divers/plume.png" alt="Affichage d'une plume d'oie d'écrivain." title="Affichage d'une plume d'oie d'écrivain." >Affichage d'une plume</a></p>

Nous avons introduit 2 classes : "blc220" et "bouton" dans notre définition du lien.

Il nous faut donc créer les lignes de commandes css pour le modifier.

4 - Reprenons les lignes écrites en paragaphe 2 et modifions-les comme suit :

article a.blc220
{
width:220px; /*définit la largeur du bloc*/
}
 
article a.bouton
{
display-inline: block; /*transforme la ligne en un bloc rectangulaire*/
color: #8b4513; /*définit la couleur du texte, ici blanc*/
font: 1em Arial, Helvetica, sans-serif; /*définit la taille et la police de caractères*/
font-weight: bold; /*texte en caractères gras*/
text-decoration: none; /*delime le soulignement par défaut des liens a*/
text-align:center; /*centre le texte dans la boîte du bouton*/
background-color: #f4a460; /*définit la couleur du fond, ici sable*/
border: 1px solid #8b4513; /*définit une bordure en plein d'épaisseur 1px et de couleur marron*/
border-radius: 0.35em; /*arrondit les coins du bouton pour les navigateurs*/
-moz-border-radius: 0.35em; /*arrondit les coins du bouton pour Firefox*/
-webkit-border-radius: 0.35em; /*arrondit les coins du bouton pour Safari*/
}
 
article a.bouton:hover
{
color: #fff; /*couleur du texte en blanc*/
background-color: #8b4513; /*couleur du fond en marron*/
border: 1px solid #fff; /*couleur bordure en blanc*/
}

Voici le résultat :

Affiche une plume pour un bouton cliquable dont la couleur change au survol de la souris.

Et pour une image non cliquable Affiche une plume utilisée dans un tuto.

Suivant