Formation PUB050 : Les feuilles de style (CSS), 2020 Les boutons

3.1 Déguiser un lien en bouton


Pour effectuer une simple redirection, l'utilisation du lien est de loin la technique la plus simple. Pourtant, l'utilisation d'un bouton est plus intéressante au niveau visuel. 

Pas de problème : avec le CSS, il est possible de déguiser le lien pour qu'il ait l'apparence d'un bouton.

Ce code est inspiré de http://www.snilesh.com/resources/css/css3-html5-button

Ex :

HTML

<a class="stylebouton" href="nouveauclient.php">Nouveau client</a>

CSS

a.stylebouton {
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
  border: solid thin #929292;
  text-shadow: none;
  background: #F6F6F6;
  background-image: -webkit-linear-gradient(top, #F6F6F6, #DDDDDD);
  background-image: -moz-linear-gradient(top, #F6F6F6, #DDDDDD);
  background-image: -ms-linear-gradient(top, #F6F6F6, #DDDDDD);
  background-image: -o-linear-gradient(top, #F6F6F6, #DDDDDD);
  background-image: linear-gradient(to bottom, #F6F6F6, #DDDDDD);    
  color: buttontext;
  padding:.375rem .75rem;
  margin: 2px;
  text-decoration: none;
  font-family: Arial;
  font-size: 1rem;
}
 
a.stylebouton:hover {
  background-image: -webkit-linear-gradient(top, #DDDDDD, #F6F6F6);
  background-image: -moz-linear-gradient(top, #DDDDDD, #F6F6F6);
  background-image: -ms-linear-gradient(top, #DDDDDD, #F6F6F6);
  background-image: -o-linear-gradient(top, #DDDDDD, #F6F6F6, #DDDDDD);
  background-image: linear-gradient(to bottom, #DDDDDD, #F6F6F6);    
}

Et voilà le résultat :

Lien style bouton

Lien style bouton

À titre comparatif, voici l'apparence qu'on aurait obtenue avec une balise input.

Lien style bouton

 

▼Publicité Le texte se poursuit plus bas

 

Veuillez noter que le contenu de cette fiche vous est partagé à titre gracieux, au meilleur de mes connaissances et sans aucune garantie.
Par Christiane Lagacé
Dernière révision le 19 janvier 2023
Merci de partager !

Site fièrement hébergé chez A2 Hosting.

Soumettre