Boutons W3.CSS
Classes de boutons W3.CSS
W3.CSS fournit les classes suivantes pour les boutons :
| Classer | Définit |
|---|---|
| w3-btn | Un bouton rectangulaire avec un effet de survol d'ombre. La couleur par défaut est le noir. |
| bouton w3 |
Un bouton rectangulaire avec un effet de survol gris. La couleur par défaut est gris clair dans W3.CSS version 3. La couleur par défaut est héritée de l'élément parent dans la version 4. |
| w3-bar |
Une barre horizontale qui peut être utilisée pour regrouper des boutons. (Parfait pour les menus de navigation horizontale) |
| bloc w3 | Classe pouvant être utilisée pour définir un bouton pleine largeur (100%). |
| w3-cercle | Peut être utilisé pour définir un bouton circulaire. |
| w3-ondulation | Peut être utilisé pour créer un effet d'entraînement. |
Boutons
La classe w3-button et la classe w3-btn ajoutent un comportement de bouton à tous les éléments HTML.
Les éléments les plus courants à utiliser sont <input type="button">, <button> et <a> :
Exemple
<input class="w3-button w3-black" type="button" value="Input Button">
<button class="w3-button w3-black">Button Button</button>
<a href="https://www.w3schools.com" class="w3-button w3-black">Link Button</a>
<input class="w3-btn w3-black" type="button" value="Input Button">
<button class="w3-btn w3-black">Button Button</button>
<a href="https://www.w3schools.com" class="w3-btn w3-black">Link Button</a>
Couleurs des boutons
Toutes les classes de couleurs w3- sont utilisées pour ajouter de la couleur aux boutons :
Exemple
<button class="w3-button w3-black">Black</button>
<button class="w3-button w3-khaki">Khaki</button>
<button class="w3-button w3-yellow">Yellow</button>
<button class="w3-button w3-red">Red</button>
<button class="w3-button w3-purple">Purple</button>
Couleurs de survol
Les effets de survol sont également disponibles dans toutes les couleurs. Voilà quelque:
La classe w3-hover- color est utilisée pour ajouter une couleur de survol aux boutons :
Exemple
<button class="w3-button w3-hover-black">Black</button>
<button class="w3-button w3-hover-red">Red</button>
<button class="w3-button w3-hover-purple">Purple</button>
Formes des boutons
Les classes w3-round- size sont utilisées pour ajouter des bordures arrondies aux boutons :
Exemple
<button class="w3-button w3-round">Round</button>
<button class="w3-button w3-round-large">Rounder</button>
<button class="w3-button w3-round-xlarge">and Rounder</button>
<button class="w3-button w3-round-xxlarge">and Rounder</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>
Tailles des boutons
Les classes w3- size peuvent être utilisées pour définir différentes tailles de texte :
Exemple
<button class="w3-button w3-tiny">Tiny</button>
<button class="w3-button w3-small">Small</button>
<button class="w3-button w3-medium">Medium</button>
<button class="w3-button w3-large">Large</button>
<button class="w3-button w3-xlarge">xLarge</button>
<button class="w3-button w3-xxlarge">XXLarge</button>
<button class="w3-button w3-xxxlarge">XXXLarge</button>
<button class="w3-button w3-jumbo">Jumbo</button>
Bordures des boutons
La classe w3-border peut être utilisée pour ajouter des bordures aux boutons.
Les classes w3-border- color sont utilisées pour définir la couleur de la bordure :
Exemple
<button class="w3-button w3-white w3-border">Button</button>
<button class="w3-button w3-white w3-border w3-border-blue">Button</button>
<button class="w3-button w3-yellow w3-border">Button</button>
<button class="w3-button w3-white w3-border w3-border-red w3-round-large">Button</button>
Astuce : ajoutez la classe w3-round- size pour ajouter des bordures arrondies.
Boutons avec différents effets de texte
Les boutons peuvent utiliser des effets de texte plus larges :
La classe w3-wide ajoute un effet de texte plus large :
Exemple
<button class="w3-button">Normal</button>
<button class="w3-button w3-wide">Wide</button>
Les boutons peuvent avoir des effets de texte en italique et en gras :
Utilisez des balises HTML standard (<i> et <b>) pour ajouter un effet italique ou gras au texte du bouton :
Exemple
<button class="w3-button"><i>Italic</i></button>
<button class="w3-button"><b>Bold</b></button>
Boutons avec rembourrage
Les classes w3-padding- size sont utilisées pour ajouter un rembourrage supplémentaire autour du texte du bouton :
Exemple
<button class="w3-button w3-padding-small">Button</button>
<button class="w3-button">Button</button>
<button class="w3-button w3-padding-large">Button</button>
<button class="w3-btn w3-padding-small">Button</button>
<button class="w3-btn">Button</button>
<button class="w3-btn w3-padding-large">Button</button>
Boutons pleine largeur
Pour créer un bouton pleine largeur, ajoutez la classe w3-block au bouton.
Les boutons pleine largeur ont une largeur de 100 % et s'étendent sur toute la largeur de l'élément parent :
Exemple
<button class="w3-button w3-block">Button</button>
<button class="w3-button w3-block w3-teal">Button</button>
<button class="w3-button w3-block w3-red w3-left-align">Button</button>
<button class="w3-btn w3-block">Button</button>
<button class="w3-btn w3-block w3-teal">Button</button>
<button class="w3-btn w3-block w3-red w3-left-align">Button</button>
Astuce : Alignez le texte du bouton avec la classe w3-left-align ou la classe w3-right-align .
La taille du bloc a peut être définie en utilisant style="width:" .
Exemple
<button class="w3-button w3-block w3-black"
style="width:30%">Button</button>
<button class="w3-button w3-block w3-teal" style="width:50%">Button</button>
<button class="w3-button w3-block w3-red" style="width:80%">Button</button>
Boutons désactivés
Les boutons ressortent avec un effet d'ombre et le curseur se transforme en main au survol.
Les boutons désactivés sont opaques (semi-transparents) et affichent un "panneau interdit de stationnement" :
La classe w3-disabled est utilisée pour créer un bouton disabled (si l'élément prend en charge l'attribut HTML standard disabled, vous pouvez utiliser l'attribut disabled à la place) :
Exemple
<a class="w3-button w3-disabled" href="https://www.w3schools.com">Link Button</a>
<button class="w3-button" disabled>Button</button>
<input type="button" class="w3-button" value="Button" disabled>
<a class="w3-btn w3-disabled" href="https://www.w3schools.com">Link Button</a>
<button class="w3-btn" disabled>Button</button>
<input type="button" class="w3-btn" value="Button" disabled>
Barres de boutons
Les boutons peuvent être regroupés dans une barre horizontale à l'aide de la classe w3-bar :
Exemple
<div class="w3-bar">
<button class="w3-button w3-black">Button</button>
<button class="w3-button w3-teal">Button</button>
<button class="w3-button w3-red">Button</button>
</div>
La classe w3-bar a été introduite dans W3.CSS version 2.93 / 2.94.
Les boutons peuvent être regroupés sans espace entre eux en utilisant la classe w3-bar-item :
Exemple
<div class="w3-bar">
<button class="w3-bar-item w3-button w3-black">Button</button>
<button class="w3-bar-item w3-button w3-teal">Button</button>
<button class="w3-bar-item w3-button w3-red">Button</button>
</div>
Les barres de boutons peuvent être centrées à l'aide de la classe w3-center :
Exemple
<div class="w3-center">
<div class="w3-bar">
<button class="w3-button w3-black">Button</button>
<button class="w3-button w3-teal">Button</button>
<button class="w3-button w3-disabled">Button</button>
</div>
</div>
Pour afficher deux barres de boutons (ou plus) sur la même ligne, ajoutez la classe w3-show-inline-block :
Exemple
<div class="w3-show-inline-block">
<div class="w3-bar">
<button class="w3-btn">Button</button>
<button
class="w3-btn w3-teal">Button</button>
<button class="w3-btn
w3-disabled">Button</button>
</div>
</div>
<div
class="w3-show-inline-block">
<div
class="w3-bar">
<button class="w3-btn">Button</button>
<button
class="w3-btn w3-teal">Button</button>
<button class="w3-btn
w3-disabled">Button</button>
</div>
</div>
Barres de navigation
Les barres de boutons peuvent facilement être utilisées comme barres de navigation :
Exemple
<div class="w3-bar w3-black">
<button class="w3-bar-item
w3-button">Button</button>
<button class="w3-bar-item
w3-button">Button</button>
<button class="w3-bar-item
w3-button">Button</button>
</div>
La taille de chaque élément peut être définie en utilisant style="width:" :
Exemple
<div
class="w3-bar">
<button class="w3-bar-item w3-button"
style="width:33.3%">Button</button>
<button class="w3-bar-item w3-button
w3-teal" style="width:33.3%">Button</button>
<button
class="w3-bar-item w3-button w3-red" style="width:33.3%">Button</button>
</div>
Vous en apprendrez plus sur la navigation plus loin dans ce didacticiel.
Boutons gauche et droit
Utilisez la classe .w3-left et la classe .w3-right pour faire flotter les boutons vers la gauche ou vers la droite :
Permet de créer des boutons "précédent/suivant" :
Exemple
<div class="w3-bar">
<button class="w3-button w3-left">Left</button>
<button class="w3-button w3-right">Right</button>
</div>
Boutons avec effets d'entraînement
The w3-ripple class creates a ripple effect on buttons (when they are clicked on):
Example
<button class="w3-button w3-ripple">Button</button>
<button
class="w3-button w3-ripple w3-red">Button</button>
<button class="w3-button
w3-ripple w3-yellow">Button</button>
All Elements Can Be Buttons
With W3.CSS, all elements can be a button:
A picture can be a w3-button
A picture can be a w3-btn
Any div, header, footer or other containers can be a w3-btn!
Circular Buttons
The w3-circle class can be used to create circular buttons:
Example
<button class="w3-button w3-circle w3-black">+</button>
<button class="w3-button w3-circle w3-teal">+</button>
Square buttons:
Example
<button class="w3-button w3-black">+</button>
<button
class="w3-button w3-teal">+</button>