Le laboratoire : Boutons en css

Page d'introduction

Lien avec image de fond

Nous allons étudier comment transformer un lien en un bouton simple css non extensible.
Exemple du bouton css :
Bouton

Il faut déjà créer le design de notre bouton. Nous allons créer une seule image avec nos différents états :
- l'état normal
- l'état hover
L'image :


Code HTML du lien :
Exemple de code :
<a href="style_css/feuille_css_hover.html" id="dmc-bouton-css">Mon bouton</a>

La deuxième étape consiste à définir les propriétés générales de notre bouton : taille, image de fond et alignement du texte et aspect du texte comme la couleur taille et police.L'aspect du texte a été omis à fin d'alléger le code ci-dessous.
Exemple de code :
#dmc-bouton-css{
  display: inline-block;
  width:75px;
  height:24px;
  line-height:24px; /* Pour l'alignement Vertical */
  background-position: 0 0;
  background-image:url(images/labo/boutond.gif);
  text-align:center;
  vertical-align:middle;
  text-decoration:none;
}

Et l'étape finale consiste à faire coulisser l'image de fond quand la souris passe sur le bouton.
Exemple de code :
#dmc-bouton-css:hover {
  background-position: -75px 0;
}


Il est possible de mettre un troisième état en utilisant le sélecteur :active.

Création d'un bouton étirable

Intro

Nous allons étudier comment transformer un lien en un bouton css extensible sur fond uni et sur fond non uni.
Pourquoi je fais une différence entre un bouton sur fond uni et non uni. En fait, le code HTML n'est pas le même, sur fond non uni nous rajoutons du code HTML et donc dans un soucis d'optimiser le code je considère qu'il ne faut pas avoir de balise HTML qui ne sert pas dans le fond uni.

Dans les codes des boutons css ci-dessous, l'aspect du texte comme la couleur taille et police a été omis à fin d'alléger le code.

Bouton css sur fond uni

Les images :


Code HTML :
Exemple de code :
<a href="#" id="bouton-css"><span>Mon bouton css</span></a>

Code CSS du bouton :
Exemple de code :
#bouton-css{
  background-image:url(images/labo/bt_c_d.gif);
  background-repeat:no-repeat;
  background-position:100% 0;
  height:37px;
  display:inline-block;
  padding-right:21px; /* épaisseur de l'arrondi */
  line-height:37px; /* hauteur de l'image */
  vertical-align:middle;
}
#bouton-css span{display:inline-block;
  background-image:url(images/labo/bt_c_g.gif);
  background-position:0 0;
  background-repeat:no-repeat;
  height:37px; /* hauteur de l'image */
  padding-left:21px; /* épaisseur de l'arrondi */
  white-space:nowrap; /* pas de retour à la ligne */
}
#bouton-css:hover span{
  background-position:0 -37px;
}
#bouton-css:hover{
  background-position:100% -37px;
}

Résultat du bouton css :
Un bouton en css

Bouton css sur fond non uni

Les images :


Code CSS :
Exemple de code :
#dmcbouton{
  background-image:url(bt_c_g.gif);
  background-repeat:no-repeat;
}
#dmcbouton a{
  padding-right:21px; /*largeur de l'image bt_c_g.gif*/
  margin-left:21px; /*largeur de l'image bt_c_g.gif*/
  background-image:url(bt_c_d.gif);
  background-repeat:no-repeat;
  background-position:100% 0;
  text-decoration:none;
}
#dmcbouton a,#dmcbouton{
  display:-moz-inline-box;
  display:inline-block;
  height:37px; /*hauteur de l'image*/
  white-space:nowrap;
}
#dmcbouton a b{
  vertical-align:top;
  font-size:12px;
  display:block;
  cursor:pointer;
  _display:inline-block;
  font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
  line-height:37px; /*hauteur de l'image*/
  vertical-align:middle;
  color:#fff;
}

Code HTML :
Exemple de code :
<span id="dmcbouton"><a href="#"><b>mot bouton</b></a></span>

Exemple :

Création d'un bouton étirable sur fond uni

Autres technique

test

La pseudo-classe feuille de style css :active permet de spécifier toutes les propriétés liées à la fonte (police, taille), à la décoration de texte (g...[Voir]