Les boutons en Css - FAQ CSS

Introduction à la création de boutons Css

Que vais-je trouver?

Dans un premier temps, nous étudierons le concept de "Bouton" d'un point de vue CSS, HTML et Javascript.
Puis, je vous mettrais des exemples basiques de boutons Css pour avoir une structure CSS de base pour que vous puissiez ensuite faire vos propres boutons CSS.

N'importe quel élément peut être transformé visuellement en bouton, par exemple un lien peut être transformé en bouton, d'ailleurs c'est le cas le plus courant. Je vous montrerais les bases de ce "skinnage" dans cet article.

Cependant certains boutons visuels ont et doivent vraiment avoir un rôle de bouton au sens "application", ce qui est très important au niveau de l'accessibilité (WAI et ARIA). La balise button par exemple est un "bouton applicatif", elle est donc à utiliser en premier pour ce genre de bouton. Cependant dans certain cas, vous ne pourrez ou ne voudrez pas mettre de balise button, dans ce cas là, il est nécessaire d'intervenir à divers niveaux pour en faire un "bouton applicatif", c'est ce que nous verront en même temps dans cet article en utilisant une balise span et non button, mais le "skinnage" reste quasi identique.

Qu'est-ce qu'un bouton en Html

Les divers états d'un bouton

Avant de créer votre bouton Css, il faut avant tout savoir qu'un bouton HTML est constitué de plusieurs états qu'il faudra charter :

• l'état normal : c'est l'affichage initial du bouton Css quand ce dernier est affiché au chargement de la page.
• l'état survolé : c'est l'affichage du bouton Css quand le curseur le survole.
  Utilisez la pseudo-classe Css :hover.
• l'état de focus : c'est l'affichage du bouton Css quand ce dernier est sélectionné via la tabulation ou enfoncé avec la souris.
  Utilisez la pseudo-classe Css :focus. Sachez que les éléments n'acceptent pas tous le focus. Les solutions sont données plus bas.
• l'état enfoncé : c'est l'affichage du bouton Css quand l'internaute enfonce ce dernier avec le curseur.
  Utilisez la pseudo-classe Css :active. Sachez que les éléments n'acceptent pas tous l'état enfoncé. Les solutions sont données plus bas.

<style>
/* Respecter l'ordre des états, c'est celui conseillé par le W3c */
.button{ /* CSS pour l'état normal */}
.button:hover { /* CSS pour l'état survolé */}
.button:focus { /* CSS pour l'état de focus */}
.button:active { /* CSS pour l'état enfoncé */}
</style>
<span class="button">Mon bouton Css</span>

Déclenchement et héritage des états activés

Si vous déclenchez l'action du bouton Css via le clavier, l'état :active n'est pas déclenché.
Si vous cliquez avec le curseur sur le bouton Css, l'état :active est déclenché aussi que l'état :focus et :hover.

Si vous prenez le focus du bouton Css via la tabulation et que vous passez ensuite le curseur sur le bouton Css alors :focus et :hover sont déclenchés en même temps.
Cela veut dire que le résultat de l'affichage du bouton Css sera un mixte de l'ensemble des propriétés déclarées dans les divers états activés. C'est ce que je vais vous monter dans les deux exemples de boutons qui suivent.

.button{ border : 1px solid #000; padding : 5px; }
.button:hover { background-color : gray;}
.button:focus { border : 3px dotted green; }
.button:active { color : #d4860c; }

Si vous cliquez sur le bouton Css ci-dessous, vous pouvez constater que les propriétés des trois états sont bien affichées.
Mon bouton Css

.button{ border : 1px solid #000; padding : 5px; }
.button:hover { background-color : gray;}
.button:focus { border : 3px dotted green; }
.button:active { background-color : red; }

Si vous cliquez sur le bouton Css ci-dessous, vous pouvez constater que c'est le fond de couleur rouge qui est hérité.
Mon bouton Css

L'ordre de déclarations des états du bouton dans la Css

Cette partie n'est là que vous monter que l'ordre de déclarations des états dans la Css, influence l'affichage mais, vous devez conserver l'ordre conseillé par le W3c.
Si j'inverse les deux lignes .button:active et .button:hover.

.button{ border : 1px solid #000; padding : 5px; }
.button:active { background-color : red; }
.button:focus { border : 3px dotted green; }
.button:hover { background-color : gray;}

Donc, attention à l'ordre de déclarations des états, il influence l'héritage des propriétés Css.

Sachez que vous pouvez augmenter le poids en additionnant les états .button:hover:active.

.button{ border:1px solid #000; padding:5px; }
.button:hover:active,
.button:hover { background-color: gray;}
.button:focus { border : 3px dotted green; }
.button:active { background-color : red; }

Cliquez sur le bouton Css ci-dessous, vous pouvez constater que c'est le fond de couleur gris qui est hérité.
Mon bouton Css

Problème de focus et d'active

Vous devez aussi faire en sorte que le comportement soit identique à une balise button, pour devenir un bouton "applicatif".
Le bouton Css doit pouvoir prendre le focus ce qui n'est pas forcement le cas de tous les éléments HTML. Si la balise faisant office de bouton CSS n'accepte pas le focus par défaut, il faut lui ajouter un attribut tabindex="0".
Le bouton Css doit pouvoir prendre l'active ce qui n'est pas forcement le cas de tous les éléments HTML. Si la balise faisant office de bouton CSS n'accepte pas l'état actif par défaut, il faut lui ajouter une classe ou autre élément permettant de déclencher le "style actif". Voir Accessibilité et le bouton Css.

Les divers événements d'un bouton Css

Vous devez aussi faire en sorte que le comportement soit identique à une balise button, pour devenir un bouton "applicatif".
Le bouton Css doit déclencher une action 'A' lorsqu'il est cliqué par le curseur de la souris ou quand le bouton a le focus et que l'on actionne la barre d'espace ou la touche "entrée".

Donc vous devez surveiller les événements JavaScript suivant du bouton Css :

• onclick, pour la souris. Peut être nécessaire sur une balise button, notamment si elle est le type égal button.
• onkeydown, pour le clavier.
  Surveillez le keyCode de valeurs 13 pour la touche "entrée" et 32 pour la touche "espace".

<span onkeydown = "keydown(event)" onclick = "click(event)" tabindex = "0">Mon bouton Css</span>
<script>
function click(oEvent){
  //Action A
}

function keydown(keydown){
  oEvent = oEvent || window.event;
  if(oEvent.keyCode != 13 && oEvent.keyCode != 32)){
    //C'est pas les touches attendues
    oEvent.stopPropagation();
    return false;	
  } 
  //Action A
}
/* Pour faciliter la compréhension et le code j'ai mis directement l'événement sur la balise. Cependant vous devrez utiliser la méthode Javascript addEventListener( event, fonction).
Cette remarque est valable pour l'ensemble des exemples */
</script>

Si vous cliquez sur le bouton Css ci-dessous ou que vous utilisez la touche "espace" ou "entrée" en ayant le focus, une alerte est déclenchée.
Mon bouton Css

Accessibilité et le bouton Css

Pour spécifier que votre bouton est un bouton "applicatif", vous devez ajouter des éléments d'accessibilité à votre balise (X)HTML. L'élément (X)HTML doit avoir comme attribut HTML role="button".

Si votre bouton Css est un bouton à bascule, c'est-à-dire que son état "initial" peut être enfoncé ou normal, vous devez ajouter l'attribut HTML aria-pressed="true" s'il est enfoncé, aria-pressed="false" s'il n'est pas enfoncé. Cela est valable aussi pour les boutons de formulaires button et input.

<span role="button" aria-pressed="false">Mon bouton Css</span>

Exemple de code de bouton Css simple

Voici le code complet HTML, CSS et Javascript pour un bouton Css simple.

<style>
#mon-bouton{
  border : 1px solid #adadad; background-color : #e1e1e1; padding : 0 8px; cursor : pointer; display : inline-block
}
#mon-bouton:focus{
  border-color : #0078d7; background-color : #e1e1e1; outline : none;
}
#mon-bouton:hover{
  border-color : #0078d7; background-color : #e5f1fb;  outline : none
}
#mon-bouton:active{
  border-color : #005499; background-color : #cce4f7; outline : none
}
</style>
<span id="mon-bouton" onclick="fct_evenement(event)" onkeydown="fct_evenement(event)" tabindex="0" role="button">bouton Css</span>
<script>
function fct_evenement(oEvent){
  oEvent = oEvent || window.event; 
  if(oEvent.type == "keydown" && oEvent.keyCode != 13 && oEvent.keyCode != 32){
    oEvent.stopPropagation();
    return false;
  }
  alert("action");
}
</script>

Résultat du code du bouton Css :
bouton Css

Exemple de code de bouton Css à bascule

Voici le code complet HTML, CSS et Javascript pour un bouton Css à bascule.

<style>
#mon-bouton-toggle{
  border : 1px solid #adadad; background-color : #e1e1e1; padding : 0 8px; cursor : pointer;  display : inline-block
}
#mon-bouton-toggle:hover{
  border-color : #0078d7; background-color : #e5f1fb; outline :none
}
#mon-bouton-toggle[aria-pressed="true"]:focus,
#mon-bouton-toggle:focus{
  border-color : #0078d7; background-color:#e1e1e1; outline : solid 1px #005499;
}
#mon-bouton-toggle[aria-pressed="true"],
#mon-bouton-toggle:active{
  border-color : #005499!important; background-color : #cce4f7!important; outline :none
}
</style>
<span id = "mon-bouton" onclick = "fct_evenement_toggle(event)" onkeydown = "fct_evenement_toggle(event)" tabindex = "0" role = "button" aria-pressed = "true">bouton Css</span>
<script>
function fct_evenement_toggle(oEvent){
  oEvent = oEvent || window.event; 
  if(oEvent.type == "keydown" && oEvent.keyCode != 13 && oEvent.keyCode != 32){
    oEvent.stopPropagation();
    return false;
  }
  var oButton = oEvent.currentTarget;
  var sPressed = 'false';
  var sAriaPressed = oButton.getAttribute('aria-pressed');
  if(sAriaPressed == 'false') {
    sPressed = 'true';
  }
  oButton.setAttribute('aria-pressed', sPressed);
  alert("action");
}
</script>

Résultat du code du bouton Css :
bouton Css

Avant de passer aux exemples de boutons Css

Quelques informations avant de commencer

Dans cette partie nous n'étudions que la partie CSS.

Pour tester le focus du bouton Css : Sélectionner une portion de texte située avant le bouton Css et faites ensuite une tabulation. A ce moment-là, le bouton CSS prend seulement le focus.

Pour éviter de faire trop de répétitions de code CSS, tous les boutons Css auront la classe button-cours :

.button-cours {
/* white-space force le texte à rester sur une ligne */
  white-space : nowrap;
/* cursor affiche un curseur identique à celui des liens et boutons */
  cursor : pointer;
/* Aspect  du texte */
  font : 14px Arial, Helvetica, sans-serif;
/* display Transformation du type pour que celui-ci ai un comportement de type "block" */
  display : inline-block;
/* Alignement vertical du texte */
vertical-align : middle;
/* user-select Empêche que le texte soit sélectionné */
  -ms-user-select : none;
  -webkit-user-select : none;
  -moz-user-select : none;
  user-select : none;
/* Supprime outline fait juste pour ne pas perturber les exemples. 
Normalement pour l'accessibilité cela ne devrait pas se faire, */
  outline : none;
}

<style>
#mon-bouton-1{
/* hérite de la class button-cours */
  color : #fff;
  padding : 0.313em 0.5em;
/* padding : 5px 8px;  pour une font-size parent de 16px */
  background-color : #078548;
}
#mon-bouton-1:hover{
  background-color : #58a41c;
}
#mon-bouton-1:focus{
  background-color : #007700;
}
#mon-bouton-1:focus span{
  outline : 1px dotted #830743;
}
#mon-bouton-1:active{
  background-color : #066c3a;
}
</style> 
<span id="mon-bouton-1" tabindex="0" role="button"><span>Bouton Css</span></span>

<style>
#mon-bouton-1-1{
/* hérite de la class button-cours */
/* remplacer background-color */
  background-color : #007700;
  background-image : -webkit-linear-gradient(top, #57a41c, #3f800a);
  background-image : -moz-linear-gradient(top, #57a41c, #3f800a);
  background-image : -ms-linear-gradient(top, #57a41c, #3f800a);
  background-image : -o-linear-gradient(top, #57a41c, #3f800a);
  background-image : linear-gradient(to bottom, #57a41c, #3f800a);
}
#mon-bouton-1-1:hover{
  background-color: #3f800a;
  background-image: -webkit-linear-gradient(top, #3f800a, #579524);
  background-image: -moz-linear-gradient(top, #3f800a, #579524);
  background-image: -ms-linear-gradient(top, #3f800a, #579524);
  background-image: -o-linear-gradient(top, #3f800a, #579524);
  background-image: linear-gradient(to bottom, #3f800a, #579524);
}
#mon-bouton-1-1:focus{
  background-color : #007700;
  background-image: -webkit-linear-gradient(top, #007700, #3f800a);
  background-image: -moz-linear-gradient(top, #007700, #3f800a);
  background-image: -ms-linear-gradient(top, #007700, #3f800a);
  background-image: -o-linear-gradient(top, #007700, #3f800a);
  background-image: linear-gradient(to bottom, #579524, #85c155);
}
#mon-bouton-1-1:active{
  background-color: #579524;
  background-image: -webkit-linear-gradient(top, #579524, #326907);
  background-image: -moz-linear-gradient(top, #579524, #326907);
  background-image: -ms-linear-gradient(top, #579524, #326907);
  background-image: -o-linear-gradient(top, #579524, #326907);
  background-image: linear-gradient(to bottom, #579524, #326907);
}
</style> 
<span id="mon-bouton-1" tabindex="0" role="button"><span>Bouton Css</span></span>

<style>
#mon-bouton-2{
/* Code css du bouton css mon-bouton-1 */
  -moz-border-radius : 6px;
  -webkit-border-radius : 6px;
  border-radius : 6px;
}
/* le reste est identique au bouton mon-bouton-1 */
</style>

<style>
#mon-bouton-3{
/* Code css du bouton css mon-bouton-1 
avec remplacement de : 
padding : 5px (border-radius/2)px;  pour une font-size parent de 16px */
  padding : 0.313em 0.625em;
  display : inline-table;
/* on veut que le bouton Css garde des bordures arrondies de 20px quoi qu'il arrive 
20px = border-radius
*/
  min-height : 20px; 
/* */
  -moz-border-radius : 20px;
  -webkit-border-radius : 20px;
  border-radius : 20px;
}
#mon-bouton-3 span{
/* on veut que le contenu du bouton Css soit toujours centré verticalement
20px = border-radius
*/
  display : table-cell;
  min-height : 20px;   
  vertical-align : middle; 
}
/* le reste est identique au bouton mon-bouton-1 */
</style>

<style>
#mon-bouton-4{
/* hérite de la class button-cours */
  padding : 0.313em 0.5em;
  background-color : #f5f5f5;
  border : 1px solid #ccc;
  -webkit-box-shadow : 0px 3px 3px 0px #d1d1d1;
  -moz-box-shadow : 0px 3px 3px 0px #d1d1d1;
  box-shadow : 0px 3px 3px 0px #d1d1d1;
}
#mon-bouton-4:hover {
  background-color : #e8e8e8;
  -webkit-box-shadow : 0px 1px 1px 0px #d1d1d1;
  -moz-box-shadow : 0px 1px 1px 0px #d1d1d1;
  box-shadow : 0px 1px 2px 0px #d1d1d1;
}
#mon-bouton-4:focus {
  border-color : #478bf9;
}
#mon-bouton-4:active {
  background-color : #e8e8e8;
  -webkit-box-shadow : 0px 1px 1px 0px #d1d1d1;
  -moz-box-shadow : 0px 1px 1px 0px #d1d1d1;
  box-shadow : 0px 1px 2px 0px #d1d1d1;
}
</style>

Cas particuliers de boutons Css

Transformer une balise A en bouton css

Une balise A qui correspond à un lien accepte le focus par tabulation par défaut.

• Si le bouton sur le lien a un role de lien, il ne s'agit pas dans ce cas d'un bouton au sens HTML, mais d'un lien "reskinner" pas besoin de faire d'ajout Javascript ou d'accessibilité.
• Dans le cas contraire ( si le bouton sur le lien ouvre par exemple une pop-up ), il fait bien office de bouton, vous devez y ajouter les attributs d'accessibilité et ajouter un écouteur Javascript pour la touche "espace".

Quand vous chartez un lien HTML en bouton Css, vous devrez en plus spécifier les pseudo-classes Css :visited et :link qui doivent être identiques à version initiale d'affiche (ou pas).
Vous devrez en plus supprimer le soulignement en mettant la propriété text-decoration à :none sur toutes les pseudo-classes utilisées pour le bouton Css.

a:visited,
a:link,
a{
  text-decoration : none;
}

Bouton de formulaire HTML

Pour les boutons de formulaire de type button ou input sous Firefox quand le bouton HTML a le focus, le texte du bouton est entouré d'une bordure pointillée pour des questions d'accessibilité. Si vous désirez l'enlever, vous devez utiliser la propriété préfixée -moz-focus-inner.

mon-bouton-css::-moz-focus-inner{
  border : none;
}

Autres concepts de styles de boutons en Css

Suite dans le "Labo"

Les suites des exemples sera mise dans Le laboratoire.

Suite des exemples de boutons en Css