Design BOUTONS

Introduction aux boutons

Les boutons .btn permettent de déclencher des actions dans l'interface utilisateur : navigation, validation, interaction ou actions rapides.

Les boutons permettent de créer une interface claire, moderne et interactive.

Boutons standards avec couleurs

Aperçu :


<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-dark">Dark</button>

Boutons outline

Aperçu :


<button class="btn btn-outline-primary">Primary</button>
<button class="btn btn-outline-success">Success</button>
<button class="btn btn-outline-danger">Danger</button>

Taille des boutons

Aperçu :


<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary">Normal</button>
<button class="btn btn-primary btn-sm">Small</button>

Boutons désactivés

Aperçu :


<button class="btn btn-primary" disabled>
  Bouton désactivé
</button>

Boutons sur différents éléments HTML

Aperçu :

Lien


<a href="#" class="btn btn-primary">Lien</a>
<input type="button" class="btn btn-success" value="Input Button">

Boutons pleine largeur

Aperçu :


<div class="d-grid gap-2 mb-2">
  <button class="btn btn-primary">Bouton 1</button>
  <button class="btn btn-secondary">Bouton 2</button>
</div>

Groupe de boutons

Aperçu :


<div class="btn-group mb-2">
  <button class="btn btn-primary">Left</button>
  <button class="btn btn-primary">Middle</button>
  <button class="btn btn-primary">Right</button>
</div>