Sommaire

La taille des boutons

Foundation propose plusieurs tailles de bouton, avec les classes : .tiny, .small et .large.

Voici leur application :

Le code HTML/CSS :

<p> 
<button type="button" class="button tiny">Enregistrer</button> 
<button type="button" class="button small">Enregistrer</button> 
<button type="button" class="button">Enregistrer</button> 
<button type="button" class="button large">Enregistrer</button> 
</p>

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

Voici l’affichage :

images/C08-003.png

Voici les classes utilisées :

.button.tiny { 
  font-size: 0.6rem; 
} 
.button.small { 
  font-size: 0.75rem; 
} 
.button.large { 
  font-size: 1.25rem; 
}

Notez bien que lorsque la classe n’est pas précisée par une des classes précédemment citées, c’est la taille "standard" qui est affichée.

L’autre classe .expanded affiche les boutons sur toute la largeur disponible. Vous pouvez l’utiliser avec la class .small.

Le code HTML/CSS :

<p><button type="button" class="button expanded">Enregistrer</button></p> 
<p><button type="button" class="button expanded small">Enregistrer</button></p>

Voici l’affichage obtenu :

images/C08-004.png

Voici la classe utilisée ...