Sommaire

Les boutons avec des bordures

Autre mise en forme possible : des boutons avec des bordures colorées, sans fond coloré. Il suffit d’ajouter la classe .hollow à celles existantes :

<p> 
<button class="hollow button" href="#">Couleur standard</button> 
<button class="secondary hollow button" href="#">Couleur secondaire</button> 
<button class="success hollow button" href="#">Couleur de success</button> 
<button class="alert hollow button" href="#">Couleur d’alerte</button> 
<button class="warning hollow button" href="#">Couleur d’attention</button> 
</p>

Le fichier de cet exemple à télécharger est Chapitre 08 / 08-bouton-e.html.

Voici en exemple les propriétés appliquées avec les classes .hollow et .success :

.button.hollow.success { 
  border: 1px solid #3adb76; 
  color: #3adb76; 
} 
.button.hollow, 
.button.hollow:hover, 
.button.hollow:focus { 
  background: transparent; 
}