CSS

Pure CSS3

Bouton sensitif en pure CSS3

Retour sur un classique des années 90 « Le RollOver CSS... ». À l’époque c’est Netscape et Internet Explorer version 3... Et pourtant tout était là, il suffisait de le saisir! Le grand détour des années 2000 causé par l’incompatibilité systémique de l’époque et entretenu par le Javascript et ses gestionnaires d’événements onMouseOver onMouseOut. On parlait alors imaginez de HTML dynamique, le DHTML! « Images réactives ou le RollOver ».

Les choses on bien changés. On aura toujours besoins du Javascript mais le CSS a conquis ça part du gâteau par sa simplicité et l’efficacité au point de détrôner premièrement le HTML puis, avec la version CSS3, le Javascript et donc l’indispensable des années 2010, le fameux « jQuery ». Du pure CSS et nos vieux sélecteurs (pseudo-class) :

• :link
• :focus
• :hover
• :active

Il existe plusieurs façons de faire réagir un bouton en pure CSS avec un sélecteur. Il y a le poids lourd avec Bootstrap, un bouton dans tout ces états, couleurs, grandeurs, portable etc. On peut travailler directement sur le lien en forçant l’affichage display:block. Mais voilà une méthodes qui utilise une simple classe « bouton ». Essentiellement une marge (padding), une couleur de fond et une bordure.

Exemple avec la classe « .bouton »

<style>
/* Compatible TOUS les navigateurs */
.bouton {
  color: #fff;
  padding: 4px;
  background-color: #428bca;
  border: solid 1px #357ebd;
  line-height:16px;
  text-decoration: none;
}
</style>

<a class="bouton" href="#">Hyperlien « classe bouton »</a>

Hyperlien « classe bouton »

Exemple avec style et « role="button" »

Une méthode très intéressant est de cibler l’attribut « role » role="button" au lieu d’utiliser une classe. Celà permet entre autre de distinguer un hyperlien d’un bouton. J’ai aussi volontairement ajouté la classe « a » pour le distinguer d’un véritable bouton d’un formulaire par exemple. Profitons de l’occasion pour ajouter une subtile rondeur au bouton. Nous pourrions aussi ajouter un dégradé, de l’ombrage etc. On verra d’ailleurs plus loin comment animer notre bouton.

<style>
a[role="button"] {
  color: #fff;
  padding: .7em;
  background-color: #428bca;
  border: solid 1px #357ebd;
  line-height:2.2em;
  text-decoration: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
</style>

<a role="button" href="#">Hyperlien « role="button" »</a>

Hyperlien « role="button" »

Avec le sélecteur :hover

Notre bouton est déjà bien en évidence mais ajoutons-lui un effet sensitif en changeant la couleur de fond du bouton.

<style>
a[role="button"]:hover, [role="button"].bouton:focus {
  color: #fff;
  background-color: #3071a9;
  border: solid 1px #285e8e;
  text-decoration: none;
}
</style>
<a role="button" href="#">Hyperlien « role="button" »</a>

Hyperlien sensitif

Avec animation « transition-duration »

Ajoutons une transition mais directement dans la classe « bouton » (au lieu du sélecteur :hover) puisque l’événement est déclenché lors du passage de la souris mais aussi lorsque celle-ci quitte le bouton. Merci à Dmitry Fadeyev pour cette précision.

<style>
a[role="button"] {
  [...]
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  transition-duration: 0.2s;
}

Hyperlien avec animation

Avec le sélecteur :active

La pseudo-classe :active permet de modifier l’aspect de notre bouton lors d’un clic en ajoutant bordure.

<style>
a[role="button"]:active {
  color: #fff;
  background-color: #3071a9;
  border: solid 1px #12314c;
}
</style>
<a role="button" href="#">Hyperlien « role="button" »</a>

Hyperlien avec :active

Exemple complet

<style>
a[role="button"] {
  color: #fff;
  padding: .7em;
  background-color: #428bca;
  border: solid 1px #357ebd;
  line-height:2.2em;
  text-decoration: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  transition-duration: 0.2s;
}

a[role="button"]:hover, [role="button"].bouton:focus {
  color: #fff;
  background-color: #3071a9;
  border: solid 1px #285e8e;
  text-decoration: none;
}

a[role="button"]:active {
  color: #fff;
  background-color: #3071a9;
  border: solid 1px #12314c;
}
</style>

  

  
<a role="button" href="#">Hyperlien « role="button" »</a>