W3.Pulsanti CSS
Classi di pulsanti W3.CSS
W3.CSS fornisce le seguenti classi per i pulsanti:
| Classe | Definisce |
|---|---|
| w3-btn | Un pulsante rettangolare con un effetto al passaggio dell'ombra. Il colore predefinito è nero. |
| pulsante w3 |
Un pulsante rettangolare con effetto al passaggio del mouse grigio. Il colore predefinito è grigio chiaro in W3.CSS versione 3. Il colore predefinito è ereditato dall'elemento padre nella versione 4. |
| w3-barra |
Una barra orizzontale che può essere utilizzata per raggruppare i pulsanti. (Perfetto per i menu di navigazione orizzontale) |
| blocco w3 | Classe che può essere utilizzata per definire un pulsante a larghezza intera (100%). |
| w3-cerchio | Può essere utilizzato per definire un pulsante circolare. |
| w3-ondulazione | Può essere utilizzato per creare un effetto ondulato. |
Bottoni
Sia la classe w3-button che la classe w3-btn aggiungono il comportamento dei pulsanti a qualsiasi elemento HTML.
Gli elementi più comuni da utilizzare sono <input type="button">, <button> e <a>:
Esempio
<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>
Colori dei pulsanti
Tutte le classi di colore w3 vengono utilizzate per aggiungere colore ai pulsanti:
Esempio
<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>
Colori al passaggio del mouse
Anche gli effetti al passaggio del mouse sono disponibili in tutti i colori. Qui ce ne sono alcuni:
La classe w3-hover- color viene utilizzata per aggiungere il colore al passaggio del mouse ai pulsanti:
Esempio
<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>
Forme dei bottoni
Le classi w3-round- size vengono utilizzate per aggiungere bordi arrotondati ai pulsanti:
Esempio
<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>
Dimensioni dei bottoni
Le classi w3- size possono essere utilizzate per definire diverse dimensioni del testo:
Esempio
<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>
Bordi dei pulsanti
La classe w3-border può essere utilizzata per aggiungere bordi ai pulsanti.
Le classi w3-border- color vengono utilizzate per definire il colore del bordo:
Esempio
<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>
Suggerimento: aggiungi la classe w3-round- size per aggiungere bordi arrotondati.
Pulsanti Con Diversi Effetti Di Testo
I pulsanti possono utilizzare effetti di testo più ampi:
La classe w3-wide aggiunge un effetto di testo più ampio:
Esempio
<button class="w3-button">Normal</button>
<button class="w3-button w3-wide">Wide</button>
I pulsanti possono avere effetti di testo in corsivo e grassetto:
Usa i tag HTML standard (<i> e <b>) per aggiungere l'effetto corsivo o grassetto al testo del pulsante:
Esempio
<button class="w3-button"><i>Italic</i></button>
<button class="w3-button"><b>Bold</b></button>
Bottoni Con Imbottitura
Le classi w3-padding- size vengono utilizzate per aggiungere ulteriore riempimento attorno al testo del pulsante:
Esempio
<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>
Pulsanti a tutta larghezza
Per creare un pulsante a larghezza intera, aggiungi la classe w3-block al pulsante.
I pulsanti a larghezza intera hanno una larghezza del 100% e si estendono per l'intera larghezza dell'elemento padre:
Esempio
<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>
Suggerimento: allinea il testo del pulsante con la classe w3-left-align o w3-right-align .
La dimensione del blocco a può essere definita usando style="width:" .
Esempio
<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>
Pulsanti disabilitati
I pulsanti risaltano con un effetto ombra e il cursore si trasforma in una mano quando ci si passa sopra con il mouse.
I pulsanti disabilitati sono opachi (semitrasparenti) e visualizzano un "segnale di divieto di parcheggio":
La classe w3-disabled viene utilizzata per creare un pulsante disabilitato (se l'elemento supporta l'attributo disabilitato HTML standard, puoi invece utilizzare l'attributo disabilitato):
Esempio
<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>
Barre dei pulsanti
I pulsanti possono essere raggruppati in una barra orizzontale utilizzando la classe w3-bar :
Esempio
<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 è stata introdotta nella versione W3.CSS 2.93 / 2.94.
I pulsanti possono essere raggruppati senza uno spazio tra di loro utilizzando la classe w3-bar-item :
Esempio
<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>
Le barre dei pulsanti possono essere centrate utilizzando la classe w3-center :
Esempio
<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>
Per mostrare due (o più) barre dei pulsanti sulla stessa riga, aggiungi la classe w3-show-inline-block :
Esempio
<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>
Barre di navigazione
Le barre dei pulsanti possono essere facilmente utilizzate come barre di navigazione:
Esempio
<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 dimensione di ogni elemento può essere definita utilizzando style="width:" :
Esempio
<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>
Imparerai di più sulla navigazione più avanti in questo tutorial.
Pulsanti sinistro e destro
Usa la classe .w3-left e la classe .w3-right per spostare i pulsanti a sinistra o a destra:
Utilizzato per creare pulsanti "precedente/successivo":
Esempio
<div class="w3-bar">
<button class="w3-button w3-left">Left</button>
<button class="w3-button w3-right">Right</button>
</div>
Pulsanti Con Effetti Ripple
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>