Sommaire

Insérer des boutons

Vous avez deux façons d’insérer des boutons Foundation : en tant que lien et comme objet bouton. 

Voici un exemple dans un lien :

<p>Cliquez sur ce lien : <a href="http://foundation.zurb.com"  
class="button">Foundation</a></p>

Voici son affichage :

images/C08-001.png

Voici un exemple en tant que bouton :

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

Voici son affichage :

images/C08-002.png

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

Voici la principale règle CSS pour la mise en forme des boutons :

.button { 
  display: inline-block; 
  text-align: center; 
  line-height: 1; 
  cursor: pointer; 
  -webkit-appearance: none; 
  transition: all 0.25s ease-out; 
  vertical-align: middle; 
  border: 1px solid transparent; 
  border-radius: 0; 
  padding: 0.85em 1em; 
  margin: 0 1rem 1rem 0; 
  font-size: 0.9rem; 
  background: #2199e8; 
  color: #fff; 
}

Notez bien qu’un effet de transition est appliqué aux boutons lors du survol et de la sortie du pointeur sur le bouton. Le bouton se colore rapidement en rouge.