En savoir plus sur la création de bouton en Css
Cours sur la création de boutons en Css
Avant de découvrir les exemples de boutons Css, je vous invite à lire le cours sur les boutons Css afin de mieux comprendre la notion de bouton en HTML.
Ce chapitre est la suite des exemples du cours sur les boutons Css. Les exemples présentés ne sont là que pour vous expliquer des concepts ou techniques, je vous laisse la créativité.
Pour l'ensemble des exemples de codes de boutons Css, les propriétés Css ci-dessous ont été omises pour alléger le code.
white-space: nowrap;
cursor: pointer;
font: 14px Arial, Helvetica, sans-serif;
display: inline-block;
line-height: 18px;
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
outline: none;Création d'un bouton Css non étirable avec skin en image de fond
Boutton Css avec une image de skin en fond
Nous allons étudier comment créer un bouton Css dont le skin du bouton est en image de fond.
Exemple du bouton Css :
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 en première position sur l'image ci-dessous,
- l'état focus en deuxième position,
- l'état hover en troisième position,
- l'état actif en dernière position.
<span id="button-labo-1" role="button" tabindex="0">
Bouton
</span>La deuxième étape consiste à définir les propriétés générales de notre bouton : aspect du texte comme la couleur taille et police taille, alignement du texte, la taille de notre bouton Css et d'assigner notre image de fond avec background-image.
/* Etat normal */
#button-labo-1{
/* insérer les propriétés par défaut */
width : 75px;
height : 24px;
overflow : hidden;
line-height : 24px; /* Pour l'alignement Vertical */
background-position : 0 0;
background-repeat : no-repeat;
background-image : url(/img/labo/boutond_v2.gif);
text-align : center;
vertical-align : middle;
}Et l'étape finale consiste à faire coulisser l'image de fond suivant l'état déclenché avec background-position.
#button-labo-1:focus{
background-position : -75px 0;
}
#button-labo-1:hover{
background-position : -150px 0;
}
#button-labo-1:active{
background-position : -225px 0;
color:#fff;
}Boutton Css cent pourcent en image
Nous allons étudier comment créer un bouton Css 100% image. Le concept est identique à notre bouton Css précédent, sauf que le texte du bouton est dans l'image. A cause de cela, il est nécessaire de faire quelques modifications afin de le rendre accessible (Web Accessibility Initiative). Le code Css du bouton est toujours le même.
Exemple du bouton Css :
L'image utilisée pour faire le skin du bouton Css :
Pour le WAI, vous devez obligatoirement avoir un libellé au format HTML.
Première étape consiste préciser pour le WAI, où se trouve le libellé du bouton Css. Utilisez l'attribut HTML aria-labelledby et donner lui la valeur de l'id de la balise qui contient le libellé du bouton Css.
<span id="button-labo-2" role="button" tabindex="0" aria-labelledby = "bouton_label">
<span id="bouton_label" class="wdg-arialabelledby-hide">
Bouton
</span>
</span>Deuxième étape consiste à cacher le libellé du bouton Css grâce à la classe wdg-arialabelledby-hide qui décale le texte dans une zone invisible par l'internaute.
/* Cache pour l'accessibilité */
.wdg-arialabelledby-hide{
position : absolute;
top : -10000px;
}display:none est pas bon pour le WAI.Si votre libellé change suivant l'état, vous devrez faire la modification du libelle HTML en Javascript.
Ajouter la propriété Css
overflow à hidden sur la balise principale.Création d'un bouton Css étirable avec skin en image de fond
Bouton Css avec coins ronds horizontaux en image (ex : 1)
Résultat du bouton css :
Il faut déjà créer le design de notre bouton. Nous allons créer deux images avec nos différents états :
- l'état normal en première position sur l'image ci-dessous,
- l'état focus en deuxième position,
- l'état hover en troisième position,
- l'état actif en dernière position.
Les images sur fond gris utilisées pour faire le skin du bouton Css :
<span id="button-labo-3" role="button" tabindex="0">
<span>Un bouton en Css</span>
</span>La deuxième étape consiste à définir les propriétés générales de notre bouton Css : alignement du texte, aspect du texte comme la couleur taille et police, hauteur du bouton Css et assigner l'image de fond avec background-image.
/* 37px est la hauteur du bouton */
/* 22px est la longueur du coin gauche du bouton */
#button-labo-3{
/* insérer les propriétés par défaut */
height : 37px;
/* évite le décalage de l'enfant vers le bas */
line-height : 2px;
background-image : url(/img/labo/bt_c_one.png);
background-repeat : no-repeat;
/* on aligne l'image à droite */
background-position : 100% 0;
vertical-align : middle;
/* met un espace à droite qui correspond au coin droit */
padding-right : 22px;
text-align : center;
}
#button-labo-3 span{
display: inline-block;
height:37px;
/* met un espace à gauche qui correspond au coin gauche */
padding-left : 22px;
line-height : 37px;
background-image: url(/img/labo/bt_c_one.png);
background-repeat : no-repeat;
background-position : 0 0;
vertical-align: middle;
text-align : center;
color : #fff;
font-weight : bold;
}Et l'étape finale consiste à faire coulisser les deux images de fond suivant l'état déclenché, grâce à la propriété Css background-position.
#button-labo-3:focus{
color : #000;
background-position : 100% -37px ;
}
#button-labo-3:focus span{
color:#000;
background-position : 0 -37px ;
}
#button-labo-3:hover{
background-position : 100% -74px ;
}
#button-labo-3:hover span{
color:#fff;
background-position : 0 -74px ;
}
#button-labo-3:active{
background-position : 100% -111px ;
}
#button-labo-3:active span{
color:#fff;
background-position : 0 -111px ;
}
Comme vous l'avez remarqué, l'image du coin gauche a du blanc à l'extérieur, il cache le fond qui passe en dessous.
La limite de cette technique est que vos boutons doivent être sur le même fond de couleur.
Bouton Css avec coins ronds horizontaux en image (ex : 2 )
Nous allons maintenant créer le même bouton Css, mais sans la contrainte du fond blanc du coin gauche en ajoutant des span pour le coin. Je n'aime pas trop cette technique car elle oblige à mettre des éléments vides qui ne serve qu'a la charte.
Résultat du bouton Css :
Il faut déjà créer le design de notre bouton. Nous allons créer deux images avec nos différents états :
- l'état normal en première position sur l'image ci-dessous,
- l'état focus en deuxième position,
- l'état hover en troisième position,
- l'état actif en dernière position.
Les images sur fond gris utilisées pour faire le skin du bouton Css :
<span id="button-labo-4-0" role="button" tabindex="0">
<!-- Les 3 span suivant doivent être collés (pas d'espace) -->
<span class="c-left"></span>
<span class="libelle">Un bouton en css</span>
<span class="c-right"></span>
</span>La deuxième étape consiste à définir les propriétés générales de notre bouton : alignement du texte, l'aspect du texte, image de fond avec background-image et la création des deux coins avec c.left et .c-right.
/* 37px est la hauteur du bouton */
/* 22px est la longueur des coins du bouton */
#button-labo-4-0{
/* définit l'élément comme servant d'origine de positionnement des fils en absolute */
height : 37px;
/* évite le décalage de l'enfant vers le bas */
line-height : 2px;
vertical-align : middle;
}
#button-labo-4-0 .libelle{
display : inline-block;
height : 37px;
line-height : 37px;
background-image : url(/img/labo/bt4_f.png);
text-align : center;
vertical-align : middle;
}
#button-labo-4-0 .c-left,
#button-labo-4-0 .c-right{
display : inline-block;
height :37px;
width : 22px;
line-height : 37px;
content : '';
background-image : url(/img/labo/bt4_c.png);
background-repeat : no-repeat;
background-position : 0 0;
vertical-align : middle;
}
#button-labo-4-0 .c-right{
/* Affiche le bon coin */
background-position : -22px 0;
}Et l'étape finale consiste à faire coulisser les deux images de fond suivant l'état déclenché sur les trois éléments avec la propriété Css background-position.
#button-labo-4-0:focus .c-right{
/* on déplace l'image de fond du coin droit */
background-position : -22px -37px ;
}
#button-labo-4-0:focus .c-left{
/* on déplace l'image de fond du coin gauche */
background-position : 0 -37px ;
}
#button-labo-4-0:focus .libelle{
/* on déplace l'image de fond du fond */
color:#000;
background-position : 0 -37px ;
}
#button-labo-4-0:hover .c-right{
background-position : -22px -74px ;
}
#button-labo-4-0:hover .c-left{
background-position : 0 -74px ;
}
#button-labo-4-0:hover .libelle{
color:#fff;
background-position : 0 -74px ;
}
#button-labo-4-0:active .c-right{
background-position : -22px -111px ;
}
#button-labo-4-0:active .c-left{
background-position : 0 -111px ;
}
#button-labo-4-0:active .libelle{
color:#fff;
background-position : 0 -111px ;
}Bouton Css avec coins ronds horizontaux en image (ex : 3)
L'évolution des Css nous permet de faire évoluer les techniques. Nous allons créer le même bouton Css mais sans ajouter des span pour le coin en utilisant des nouvelles propriétés Css du moins elles sont prises en charge par les nouveaux navigateurs.
Résultat du bouton Css :
<span id="button-labo-4" role="button" tabindex="0">
<span>Un bouton en Css</span>
</span>La deuxième étape consiste à définir les propriétés générales de notre bouton : alignement du texte, l'aspect du texte, image de fond avec background-image et la création des deux coins avec :before et :after.
/* 37px est la hauteur du bouton */
/* 22px est la longueur des coins du bouton */
#button-labo-4{
/* définit l'élément comme servant d'origine de positionnement des fils en absolute */
position : relative;
height : 37px;
/* évite le décalage de l'enfant vers le bas */
line-height : 2px;
vertical-align : middle;
}
#button-labo-4 span{
display : inline-block;
height : 37px;
line-height : 37px;
background-image : url(/img/labo/bt4_f.png);
text-align : center;
vertical-align : middle;
/* Met une espace à droite et à gauche pour mettre les coins */
margin-right : 22px;
margin-left : 22px;
}
#button-labo-4:after,
#button-labo-4:before{
/* création d'un élément virtuel à droite et à gauche pour les coins */
position : absolute;
top : 0;
display : inline-block;
height :37px;
width : 22px;
line-height : 37px;
content : '';
background-image : url(/img/labo/bt4_c.png);
background-repeat : no-repeat;
background-position : 0 0;
}
#button-labo-4:before{
/* positionne le coin gauche */
left : 0;
}
#button-labo-4:after{
/* Affiche le bon coin */
background-position : -22px 0;
/* positionne le coin droit */
right : 0;
}Et l'étape finale consiste à faire coulisser les deux images de fond suivant l'état déclenché sur les trois éléments.
#button-labo-4:focus:after{
/* on déplace l'image de fond du coin droit */
background-position : -22px -37px ;
}
#button-labo-4:focus:before{
/* on déplace l'image de fond du coin gauche */
background-position : 0 -37px ;
}
#button-labo-4:focus span{
/* on déplace l'image de fond du fond */
color:#000;
background-position : 0 -37px ;
}
#button-labo-4:hover:after{
background-position : -22px -74px ;
}
#button-labo-4:hover:before{
background-position : 0 -74px ;
}
#button-labo-4:hover span{
color:#fff;
background-position : 0 -74px ;
}
#button-labo-4:active:after{
background-position : -22px -111px ;
}
#button-labo-4:active:before{
background-position : 0 -111px ;
}
#button-labo-4:active span{
color:#fff;
background-position : 0 -111px ;
}Bouton Css avec coins ronds horizontaux en image (ex : 4)
Le même bouton Css mais qui s'adapte à son conteneur. Vous remarquerez que quand le bouton est plus petit que son libelle le texte sort du bouton. Pour remédier à ce problème, vous devez utiliser la propriété Css overflow à hidden. Mais, il y a aussi le problème de la longueur où là vous devez soit mettre une longueur minimale avec min-width
Vous pouvez aussi limiter la longueur du bouton Css avec max-width.
Résultat du bouton css :
/* prendre le même code et ajouter ou modifier les propriétés ci-dessous */
#button-labo-4{
width : 100%;
/* fixe une taille de bouton minimale, non intégré dans l'exemple */
min-width : 100px;
/* fixe une taille de bouton maximale, non intégré dans l'exemple */
max-width : 200px;
}
#button-labo-4 span{
display : block;
/* empêche le dépassement de texte, non intégré dans l'exemple*/
overflow : hidden
}Création de bouton Css avec icône
Bouton Css avec icône à gauche
Nous allons faire maintenant un bouton Css, avec une icône à gauche. La technique pour le mettre à droite est identique, il suffit de mettre .mon-icone à droite.
Il faut créer l'image d’icône avec nos différents états.
L'image sur fond gris utilisés pour faire l'icône du bouton Css :
<span id="button-labo-6" role="button" tabindex="0">
<span class="mon-icone"></span>
<span class="libelle">Un bouton en Css</span>
</span>La deuxième étape consiste à définir les propriétés générales de notre bouton : alignement du texte, l'aspect du texte et assigner l'icône.
/* 25px x 25px est taille de l'icône */
#button-labo-6{
/* insérer les propriétés par défaut */
background: #f5f5f5;
border: 1px solid #f5f5f5;
vertical-align:middle;
text-align:center;
padding:5px;
color:#333;
box-shadow: 4px 4px 8px 0 #656565;
}
#button-labo-6 .libelle{
vertical-align:middle;
}
#button-labo-6 .mon-icone{
background-image : url(/img/labo/check-min.png);
background-repeat:no-repeat;
background-position : 0 0;
width:25px;
height:25px;
display:inline-block;
vertical-align:middle;
}Et l'étape finale consiste à faire coulisser l'image des icônes suivant l'état déclenché, grâce à la propriété Css background-position et de modifier la taille de l'ombre de la propriété Css box-shadow.
#button-labo-6:focus{
color:#00ab00;
border-color:#d7d7d7;
box-shadow: 2px 2px 4px 0 #656565;
}
#button-labo-6:hover{
color:#30bf30;
box-shadow: 2px 2px 4px 0 #656565;
}
#button-labo-6:active{
color:#ffa800;
box-shadow: 1px 1px 2px 0 #656565;
}
#button-labo-6:focus .mon-icone{
background-position : -25px 0;
}
#button-labo-6:hover .mon-icone{
background-position : -50px 0;
}
#button-labo-6:active .mon-icone{
background-position : -75px 0;
}Bouton Css avec icône à gauche (ex : 2)
Nous allons créer le même bouton Css mais sans utiliser le .mon-icone.
Résultat du bouton Css :
<span id="button-labo-7" role="button" tabindex="0">
<span>Un bouton en Css</span>
</span>/* 25px x 25px est taille de l'icône */
#button-labo-7{
/* identique à #button-labo-6 */
}
#button-labo-7 span{
vertical-align:middle;
display : inline-block;
}
#button-labo-7 span:before{
content: "";
background-image : url(/img/labo/check-min.png);
background-repeat:no-repeat;
background-position : 0 0;
width:25px;
height:25px;
display : inline-block;
vertical-align:middle;
}Et l'étape finale consiste à faire coulisser l'image des icônes suivant l'état déclenché, grâce à la propriété Css background-position.
#button-labo-7:focus{
color:#00ab00;
border-color:#d7d7d7;
box-shadow: 2px 2px 4px 0 #656565;
}
#button-labo-7:hover{
color:#30bf30;
box-shadow: 2px 2px 4px 0 #656565;
}
#button-labo-7:active{
color:#ffa800;
box-shadow: 1px 1px 2px 0 #656565;
}
#button-labo-7:focus span:before{
background-position : -25px 0;
}
#button-labo-7:hover span:before{
background-position : -50px 0;
}
#button-labo-7:active span:before{
background-position : -75px 0;
}Bouton Css avec icône positionné
Nous allons créer le même bouton Css mais en positionnant l'icône.
Résultat du bouton Css :
<span id="button-labo-8" role="button" tabindex="0">
<span>Un bouton en Css</span>
</span>/* 25px x 25px est taille de l'icône */
#button-labo-8{
/* identique à #button-labo-7 */
position : relative;
overflow : visible;
padding : 2px;
}
#button-labo-8 span{
/* décalage pour l'espace réservé à l'icône
18px me semble pas mal mais on aurait pu mettre 20, 25, 22, ... */
padding-left : 18px;
vertical-align : middle;
text-align: center;
}
#button-labo-8 span:before{
/* identique à #button-labo-7 span:before */
position : absolute;
/* positionnement c'est comme vous le sentez */
bottom : 5px;
left : 3px;
}Et l'étape finale est identique à l'exemple précédent.