Bouton Foundation
Styles de boutons
Foundation propose 6 styles de bouton..buttonLa classe crée un bouton bleu avec padding. Les classes pour les boutons de différentes couleurs sont:.secondary, .success, .info, .warningou.alert:
Exemple
<button type="button" class="button">Par défaut</button>
<button type="button" class="button secondary">Secondaire</button>
<button type="button" class="button success">Succès</button>
<button type="button" class="button info">Info</button>
<button type="button" class="button warning">Avertissement</button>
<button type="button" class="button alert">Alerte</button>
<button type="button" class="button secondary">Secondaire</button>
<button type="button" class="button success">Succès</button>
<button type="button" class="button info">Info</button>
<button type="button" class="button warning">Avertissement</button>
<button type="button" class="button alert">Alerte</button>
Essayez-le vous-même »
Les classes de boutons peuvent être utilisées sur<a>, <button>, ou<input>Élément :
Exemple
<a href="#" class="button info" role="button">Bouton lien</a>
<button type="button" class="button info">Bouton</button>
<input type="button" class="button info" value="Bouton de saisie">
<input type="submit" class="button info" value="Bouton d'envoi">
<button type="button" class="button info">Bouton</button>
<input type="button" class="button info" value="Bouton de saisie">
<input type="submit" class="button info" value="Bouton d'envoi">
Essayez-le vous-même »
 |
Pourquoi définir le href de la balise a sur # ? Lorsque nous ne voulons pas que le lien mène vers une page "404" lors du clic, nous pouvons définir le href de la balise a sur #. |
|---|
Taille du bouton
ما میتوانیم استفاده کنیم.large, .smallou.tinyclasses pour définir la taille du bouton :
Exemple
<button type="button" class="button large">Grand</button>
<button type="button" class="button">Par défaut</button>
<button type="button" class="button small">Petit</button>
<button type="button" class="button tiny">Minuscule</button>
<button type="button" class="button">Par défaut</button>
<button type="button" class="button small">Petit</button>
<button type="button" class="button tiny">Minuscule</button>
Essayez-le vous-même »
Bouton arrondi
Vous pouvez utiliser.radiuset.roundclasses pour définir des boutons arrondis :
Exemple
<button type="button" class="button">Bouton par défaut</button>
<button type="button" class="button radius">Bouton arrondi</button>
<button type="button" class="button round">Bouton rond</button>
<button type="button" class="button radius">Bouton arrondi</button>
<button type="button" class="button round">Bouton rond</button>
Essayez-le vous-même »
Bouton étendu
Vous pouvez utiliser.expandLa classe utilisée pour définir la largeur du bouton à 100% :
Exemple
<button type="button" class="button">Bouton par défaut</button>
<button type="button" class="button expand">Bouton étendu</button>
<button type="button" class="button expand">Bouton étendu</button>
Essayez-le vous-même »
Bouton désactivé
Vous pouvez utiliser.disabledclasses pour rendre le bouton non cliquable :
Exemple
<button type="button" class="button">Bouton par défaut</button>
<button type="button" class="button disabled">Bouton désactivé</button>
<button type="button" class="button disabled">Bouton désactivé</button>
Essayez-le vous-même »