Boutons
Avec W3.CSS, tous les éléments HTML peuvent être des boutons.
Mais les éléments les plus communs sont <input>, <button>, et <a>:
Exemple
<input class="w3-btn" value="Input Button">
<button class="w3-btn">Button Button</button>
<a class="w3-btn"
href="http://www.w3ii.com">Link Button</a> Try It Yourself » Bouton Couleurs
Boutons viennent dans toutes les couleurs dont vous avez besoin:
Exemple
<button class="w3-btn w3-khaki">Khaki</button>
<button class="w3-btn
w3-yellow">Yellow</button>
<button class="w3-btn
w3-orange">Orange</button>
<button class="w3-btn w3-red">Red</button>
<button class="w3-btn w3-purple">Purple</button> Try It Yourself » Hover Couleurs
Bougez les effets sont de toutes les couleurs dont vous avez besoin:
Exemple
<button class="w3-btn w3-hover-khaki">Khaki</button>
<button class="w3-btn
w3-hover-white">White</button>
<button class="w3-btn w3-hover-red">Red</button>
<button class="w3-btn w3-hover-purple">Purple</button> Try It Yourself » Formes de boutons
Boutons viennent dans toutes les formes dont vous avez besoin:
Exemple
<button class="w3-btn">Normal</button>
<button class="w3-btn
w3-round">Round</button>
<button class="w3-btn
w3-round-large">Rounder</button>
<button class="w3-btn
w3-round-xlarge">and Rounder</button>
<button class="w3-btn
w3-round-xxlarge">and Rounder</button>
Try It Yourself » Tailles des boutons
Boutons viennent dans toutes les tailles dont vous avez besoin:
Exemple
<button class="w3-btn w3-tiny">Tiny</button>
<button class="w3-btn
w3-small">Small</button>
<button class="w3-btn w3-medium">Medium</button>
<button class="w3-btn w3-large">Large</button>
<button class="w3-btn w3-xlarge">xLarge</button>
Try It Yourself » Borders Button
Les boutons peuvent avoir des frontières.
Exemple
<button class="w3-btn w3-white w3-border">Button</button>
<button class="w3-btn w3-light-grey w3-border">Button</button>
<button class="w3-btn w3-yellow w3-border">Button</button>
<button class="w3-btn w3-white w3-border w3-round">Round</button>
<button class="w3-btn w3-white w3-border w3-round-large">Round</button>
<button class="w3-btn w3-white w3-border w3-round-xlarge">Round</button>
<button class="w3-btn w3-white w3-border w3-border-blue
w3-round">Button</button>
Try It Yourself » Boutons avec effets de texte
Les boutons peuvent avoir des effets de texte en italique et en gras.
Exemple
<button class="w3-btn">Normal</button>
<button class="w3-btn"><i>Italic</i></button>
<button class="w3-btn"><b>Bold</b></button>
Try It Yourself » Les boutons peuvent avoir des effets de texte d'ombre.
Exemple
<button class="w3-btn w3-red w3-text-shadow">Shadow</button>
<button
class="w3-btn w3-red w3-text-shadow"><i>Shadow</i></button>
<button
class="w3-btn w3-red w3-text-shadow"><b>Shadow</b></button>
Try It Yourself » Les boutons peuvent avoir des effets de texte minces et larges.
Exemple
<button class="w3-btn">Normal</button>
<button class="w3-btn
w3-slim">Slim</button>
<button class="w3-btn w3-wide">Wide</button>
Try It Yourself » Pleine largeur Boutons
Pour créer un bouton-largeur, ajouter la classe w3-btn-bloc à un élément.
boutons pleine largeur ont une largeur de 100%, et couvre toute la largeur de l'élément parent:
Exemple
<button class="w3-btn-block">Button</button>
<button class="w3-btn-block
w3-teal">Button</button>
<button class="w3-btn-block
w3-red w3-left-align">Button</button> Try It Yourself » Hover Effets / __gVirt_NP_NNS_NNPS<__ Boutons handicapés
Boutons se démarque quand vous souris sur eux.
Les boutons normaux affichent un pointeur de doigt.
boutons désactivés sont opaques et présentent un "aucun signe de stationnement".
Exemple
<button class="w3-btn">Button</button>
<button class="w3-btn
w3-disabled">Button</button>
<input type="button"
class="w3-btn" value="Button">
<input type="button" class="w3-btn"
value="Button" disabled> Try It Yourself » Groupes de boutons
Les boutons peuvent être regroupés (sans espace entre les deux) en utilisant "w3-btn-groupe":
Exemple
<div class="w3-btn-group">
<button class="w3-btn">Button</button>
<button
class="w3-btn w3-teal">Button</button>
<button class="w3-btn"
disabled>Button</button>
</div>
<div
class="w3-btn-group">
<button class="w3-btn w3-light-grey"
style="width:33.3%">One</button>
<button class="w3-btn
w3-light-grey" style="width:33.3%">Two</button>
<button
class="w3-btn w3-light-grey" style="width:33.3%">Three</button>
</div>
Try It Yourself » Boutons avec effets Ripple
Les boutons peuvent avoir des effets d'entraînement quand ils sont cliqués sur:
Exemple
<button class="w3-btn w3-ripple">Button</button>
<button
class="w3-btn w3-ripple w3-red">Button</button>
<button class="w3-btn
w3-ripple w3-yellow">Button</button>
Try It Yourself » Elements Button
Avec W3.CSS, tous les éléments peuvent être un bouton.
Une image peut être un bouton
Tous les div, en-tête, pied de page ou d'autres conteneurs peuvent être un bouton.
Boutons flottant
Le flottant w3-btn classe, crée des boutons circulaires qui sont destinés à des fonctions importantes:
Exemple
<a class="w3-btn-floating w3-teal">+</a>
<a
class="w3-btn-floating w3-disabled">+</a>
Try It Yourself » Utilisez le grand w3-btn-flottante-classe pour les gros boutons flottants:
Exemple
<a class="w3-btn-floating-large w3-teal">+</a>
<a
class="w3-btn-floating-large w3-disabled">+</a>
Try It Yourself »