Sommaire

Les boutons colorés CSS POUR LES BOUTONS:Couleur

Bootstrap vous propose plusieurs classes pour colorer vos boutons. Vous pouvez donner un sens à vous boutons, de sorte que vos utilisateurs aient une meilleure expérience dans vos interfaces.

Voilà les classes à utiliser :

<button type="button" class="btn btn-default">Défaut</button> 
<button type="button" class="btn btn-primary">Premier</button> 
<button type="button" class="btn btn-success">Succès</button> 
<button type="button" class="btn btn-info">Information</button> 
<button type="button" class="btn btn-warning">Attention</button> 
<button type="button" class="btn btn-danger">Danger</button> 
<button type="button" class="btn btn-link">Lien en bouton</button>

Voilà l’affichage :

images/C06-001.png

Voici les sélecteurs pour ces mises en forme.

Les classes ci-dessous sont communes aux boutons :

.btn:active, .btn.active { 
background-image: none; 
   outline: 0; 
   -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.125); 
   box-shadow: inset 0 3px 5px rgba(0,0,0,0.125); 
} 
.btn:hover, .btn:focus { 
   color: #333; 
   text-decoration: none; 
} 
.btn { 
   display: inline-block; 
   padding: 6px 12px; 
   margin-bottom: 0; 
   ...