Élément incontournable du framework, Bootstrap, découvrez les options disponibles.
Il faut avant tout ajouter la classe .btn puis le variant contextuel .btn-* qui se chargera des couleurs.
<button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-link">Link</button>
A noter le cas particulier de .btn-link qui équivaut à un bouton d'aspect neutre avec traitement du texte comme un lien de base dans un écrin de bouton.
Pour empêcher le retour automatique à la ligne, utiliser .text-nowrap.
Pour désactiver ce retour de façon globale en sass, changer cette variable : $btn-white-space:nowrap;.
html
Les classes des boutons peuvent être mises en oeuvre sur des balises a, button et input.
Ne pas omettre role="button" en cas d'usage sur une balise a.
<a class="btn btn-primary" href="#" role="button">Link</a> <button class="btn btn-primary" type="submit">Button</button> <input class="btn btn-primary" type="button" value="Input"> <input class="btn btn-primary" type="submit" value="Submit"> <input class="btn btn-primary" type="reset" value="Reset">
Possibilité de disposer de boutons plus légers graphiquement avec absence d'un background au profit d'un simple contour.
Nous utiliserons les classes contextuelles btn-outline-*.
<button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-danger">Danger</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-light">Light</button> <button type="button" class="btn btn-outline-dark">Dark</button>
A utiliser judicieusement en fonction de la couleur de fond pour garantir une bonne lisibilité.
Ajouter .btn-lg ou .btn-sm pour obtenir des boutons plus grands ou plus petits.
<button type="button" class="btn btn-primary btn-lg">Large button</button> <button type="button" class="btn btn-secondary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button> <button type="button" class="btn btn-secondary btn-sm">Small button</button>
Il est possible de personnaliser les variables css d'un bouton (inline ou via une classe personnalisée).
<button type="button" class="btn btn-primary" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;"> Custom button </button>
Possibilité de traitement de l'état disabled des différents boutons.
<button type="button" class="btn btn-primary" disabled>Primary button</button> <button type="button" class="btn btn-secondary" disabled>Button</button> <button type="button" class="btn btn-outline-primary" disabled>Primary button</button> <button type="button" class="btn btn-outline-secondary" disabled>Button</button>
aNous utilisons la classe .disabled sur la balise a.
<a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary link</a> <a class="btn btn-secondary disabled" role="button" aria-disabled="true">Link</a>
Possibilité d'obtenir un comportement de type block (occupe toute la largeur) en combinant des classes utilitaires comme dans les exemples ci-dessous.
<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
<div class="d-grid gap-2 col-6 mx-auto">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button class="btn btn-primary me-md-2" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
Possibilité d'interagir sur l'état actif d'un bouton en ajoutant data-bs-toggle="button".
Pour avoir l'état actif, il faut ajouter la classe .active et ajouter l'argument aria-pressed="true" pour une bonne prise en charge des technologies d'assistance.
<p">
<button type="button" class="btn" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn" disabled data-bs-toggle="button">Disabled toggle button</button>
</p>
<p">
<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>
</p>
Toggle link Active toggle link Disabled toggle link
Toggle link Active toggle link Disabled toggle link
<p>
<a href="#" class="btn" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a class="btn disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
</p>
<p>
<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
</p>
Les boutons utilisent des variables CSS locales. Il est possible de les manipuler en fonction du contexte aussi bien en SASS de façon globale qu'en variables CSS y compris inline.
--#{$prefix}btn-padding-x: #{$btn-padding-x};
--#{$prefix}btn-padding-y: #{$btn-padding-y};
--#{$prefix}btn-font-family: #{$btn-font-family};
@include rfs($btn-font-size, --#{$prefix}btn-font-size);
--#{$prefix}btn-font-weight: #{$btn-font-weight};
--#{$prefix}btn-line-height: #{$btn-line-height};
--#{$prefix}btn-color: #{$btn-color};
--#{$prefix}btn-bg: transparent;
--#{$prefix}btn-border-width: #{$btn-border-width};
--#{$prefix}btn-border-color: transparent;
--#{$prefix}btn-border-radius: #{$btn-border-radius};
--#{$prefix}btn-hover-border-color: transparent;
--#{$prefix}btn-box-shadow: #{$btn-box-shadow};
--#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
--#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
Exemple de création d'un variant personnalisé .btn-* en modifiant certaines variables CSS.
.btn-bd-primary {
--bs-btn-font-weight: 600;
--bs-btn-color: #fff;
--bs-btn-bg: #712cf9;
--bs-btn-border-color: #712cf9;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #6628e0;
--bs-btn-hover-border-color: #6628e0;
--bs-btn-focus-shadow-rgb: 113, 44, 249;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #5a23c7;
--bs-btn-active-border-color: #5a23c7;
}
$btn-color: var(--#{$prefix}body-color);
$btn-padding-y: $input-btn-padding-y;
$btn-padding-x: $input-btn-padding-x;
$btn-font-family: $input-btn-font-family;
$btn-font-size: $input-btn-font-size;
$btn-line-height: $input-btn-line-height;
$btn-white-space: null; // Set to `nowrap` to prevent text wrapping
$btn-padding-y-sm: $input-btn-padding-y-sm;
$btn-padding-x-sm: $input-btn-padding-x-sm;
$btn-font-size-sm: $input-btn-font-size-sm;
$btn-padding-y-lg: $input-btn-padding-y-lg;
$btn-padding-x-lg: $input-btn-padding-x-lg;
$btn-font-size-lg: $input-btn-font-size-lg;
$btn-border-width: $input-btn-border-width;
$btn-font-weight: $font-weight-normal;
$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
$btn-focus-width: $input-btn-focus-width;
$btn-focus-box-shadow: $input-btn-focus-box-shadow;
$btn-disabled-opacity: .65;
$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125);
$btn-link-color: var(--#{$prefix}link-color);
$btn-link-hover-color: var(--#{$prefix}link-hover-color);
$btn-link-disabled-color: $gray-600;
$btn-link-focus-shadow-rgb: to-rgb(mix(color-contrast($link-color), $link-color, 15%));
// Allows for customizing button radius independently from global border radius
$btn-border-radius: var(--#{$prefix}border-radius);
$btn-border-radius-sm: var(--#{$prefix}border-radius-sm);
$btn-border-radius-lg: var(--#{$prefix}border-radius-lg);
$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
$btn-hover-bg-shade-amount: 15%;
$btn-hover-bg-tint-amount: 15%;
$btn-hover-border-shade-amount: 20%;
$btn-hover-border-tint-amount: 10%;
$btn-active-bg-shade-amount: 20%;
$btn-active-bg-tint-amount: 20%;
$btn-active-border-shade-amount: 25%;
$btn-active-border-tint-amount: 10%;