Trucsweb.com

Trucsweb.com

CSS

Pure CSS3

RDFFav

Bouton sensitif en pure CSS3

Boutons réactifs avec les sélecteurs :hover, :focus, :link et :active.Réactif, Pure CSS, hyperlienBouton 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
CSS
<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>

  
HTML
  
<a role="button" href="#">Hyperlien « role="button" »</a>
  
  
, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

Ajouter un commentaire
Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
Votre évaluation du tutoriel

8/10 sur 1 revues.
       Visites : 10339 - Pages vues : 10762
X

Trucsweb.com Connexion

Connexion

X

Trucsweb.com Mot de passe perdu

Connexion

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte

Créer un compte

.
@