I pulsanti sono una parte fondamentale dell'HTML, perchè permettono all'utente di interagire con le pagine Web. w3.css offre una gamma di classi complete per gestire i pulsanti:
w3-btn: produce un pulsante rettangolare con effetto hover ad ombreggiatura. Il colore di default è nerow3-button: produce un pulsante rettangolare con effetto hover a sfondo grigio. Nella versione 4 di w3.css il colore di sfondo è ereditato dall'elemento genitore
Entrambe le classi w3-btn e w3-button possono essere applicate a qualsiasi elemento HTML per produrre l'effetto pulsante, ma vengono comunemente utilizzate con gli elementi input, button ed a. Ad esempio:
<div class="w3-container">
<h2>Pulsanti (w3-button)</h2>
<input type="button" class="w3-button w3-black" value="Input Button">
<button class="w3-button w3-black">Button Button</button>
<a href="#" class="w3-button w3-black">Link Button</a>
</div>
<div class="w3-container">
<h2>Pulsanti (w3-btn)</h2>
<input type="button" class="w3-btn w3-black" value="Input Button">
<button class="w3-btn w3-black">Button Button</button>
<a href="#" class="w3-btn w3-black">Link Button</a>
</div>Colori
Assegnare uno stile ai pulsanti è altrettanto semplice. Sfruttando le classi w3-color, possiamo infatti impostare il colore di sfondo principale ai nostri pulsanti. Lo snippet seguente mette in pratica tale concetto:
<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>Al contrario, tramite le classi w3-hover-color possiamo impostare il colore di hovering che scatta quando l'utente passa il mouse sopra al pulsante:
<p><button class="w3-button w3-border w3-hover-cyan">Cyan</button></p>
<p><button class="w3-button w3-border w3-hover-aqua">Aqua</button></p>
<p><button class="w3-button w3-border w3-hover-teal">Teal</button></p>
<p><button class="w3-button w3-border w3-hover-green">Green</button></p>
<p><button class="w3-button w3-border w3-hover-light-green">Light Green</button></p>Arrotondamento
Tramite le classi w3-round, possiamo definire l'angolo di arrotondamento ai nostri pulsanti:
<button class="w3-button w3-round">Round</button>
<button class="w3-button w3-round-large">Round x0</button>
<button class="w3-button w3-round-xlarge">Round x1</button>
<button class="w3-button w3-round-xxlarge">Round x2</button>
<button class="w3-btn w3-round">Round</button>
<button class="w3-btn w3-round-large">Round x0</button>
<button class="w3-btn w3-round-xlarge">Round x1</button>
<button class="w3-btn w3-round-xxlarge">Round x2</button>Dimensioni
Allo stesso modo, usando le classi w3-size, possiamo definire in modo immediato le dimensioni dei nostri pulsanti, in una modalità molto semplice:
<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 e padding
Di default, le classi w3-btn e w3-button non impostano i bordi ai pulsanti HTML. Possiamo farlo noi grazie alle classi w3-border e w3-border-color:
<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>Allo stesso modo, possiamo impostare valori di padding personalizzati:
<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>Dimensione full-width
Per impostare pulsanti che coprono tutto lo spazio orizzontale disponibile, ovvero pulsanti full-width, basta applicare la classe w3-block:
<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>Se combiniamo la classe w3-block alla proprietà CSS width (impostata ad esempio tramite l'attributo HTML style), possiamo modificare la larghezza dei nostri pulsanti:
<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
w3.css stilizza automaticamente i pulsanti con attributo HTML disabled (dove disponibile) oppure tramite la classe w3-disabled, che a differenza del primo è applicabile anche ad altri elementi, come i link. Il pulsante apparirà più opaco e con un cursore di blocco al posto della comune manina indicatrice:
<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>Raggruppamento e menù
Un'altra caratteristica è rappresentata dalla classe w3-bar, che permette di costruire una barra orizzontale dove incastrare i nostri pulsanti, come quelle tipiche dei sistemi di navigazione moderni:
<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>Per raggruppare gli elementi figli (in questo caso i pulsanti) dell'elemento con classe w3-bar, ed eliminare eventuali margini automatici, possiamo impostare ad ognuno di essi la classe w3-bar-item:
<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>Pulsanti circolari
Se hai necessità di creare pulsanti dalla forma circolare al posto di quella standard rettangolare, puoi utilizzare la classe w3-circle, che è applicabile anche ai pulsanti:
<button class="w3-button w3-circle w3-black">+</button>
<button class="w3-button w3-circle w3-teal">+</button>Effetto "ripple"
L'effetto "ripple" è un'aggiunta al comune comportamento dei pulsanti, che in questo caso cambiano opacità quando l'utente clicca sopra di essi. Una sorta di stato "active". Per produrlo, si utilizza la classe w3-ripple direttamente sull'elemento che funge da pulsante:
<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>Tutti gli elementi possono essere "pulsanti"
Come abbiamo dichiarato precedentemente, con le classi fornite da w3.css tutti gli elementi HTML possono potenzialmente diventare dei pulsanti cliccabili da parte dell'utente, come ad esempio elementi div o immagini:
<div class="w3-button w3-white w3-ripple" style="margin:0;padding:0">
<img src="img_snowtops.jpg" style="width:100%">
<p>Un div e un'immagine possono essere pulsanti</p>
</div>Le combinazioni estetiche tramite l'utilizzo combinato di w3.css e CSS puro per quanto riguarda i pulsanti e tutto ciò che è relativo sono pressochè illimatate.