Les boutons

Un petit bouton, deux petits boutons, trois petits boutons...

Les boutons MDN Référence, ils ont du style sans utiliser de class = "btn" et par défaut, ce sont des éléments inline 

<button>Button</button>
<input type="submit">
<input type="reset">
<input type="button" value="Bouton">

Si vous désirez que votre bouton prenne toute la largeur, vous avez à disposition la classe .btn--block 

<button class="btn--block">Bouton</button>
<button class="btn--block">Bouton</button>

Vous avez besoin de styliser un lien <a> ou un label <label> ? Il vous suffit d'utiliser role="button".

Lien 
<a href="#" role="button">Lien</a>
<label role="button">Label</label>

Les boutons supportent également l'attribut disabled. 

<button disabled>Bouton</button>
<button class="btn--secondary" disabled>Bouton</button>
<input type="submit" disabled>

Les boutons, viennent avec quelques variations de style. 

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

<button class="btn--outline">Outline Primary</button>
<button class="btn--secondary btn--outline">Outline Secondary</button>
<button class="btn--circle">Circle</button>

<button class="btn--small">Small</button>
<button class="btn--big">Big</button>
<button class="btn--noshadow">No shadow</button>
<button class="btn--noborder">No border</button>
<button class="btn--norounded">No rounded</button>

Personnalisation

Grâce aux variables CSS, vous pouvez customiser facilement vos propres boutons.
Pour plus d'informations reportez-vous à la section Personnalisation 

<button class="btn--custom">Custom</button>
.btn--custom {
  --background-color: #A1887F;
  --border-color:#3E2723;
  --color:#1B2631;
  --active-background-color:#4E342E;
  --active-color:#D7CCC8;
  --hover-background-color:#4E342E;
  --hover-color:#D7CCC8;
  --hover-border-color:#795548;
}