Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Pulsanti

Tutto ciò che c'è da sapere sulle classi fornite da w3.css per applicare gli stili più disparati ai pulsanti di una pagina web.
Tutto ciò che c'è da sapere sulle classi fornite da w3.css per applicare gli stili più disparati ai pulsanti di una pagina web.
Link copiato negli appunti

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 è nero
  • w3-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.

Ti consigliamo anche