pulsanti
Con W3.CSS, tutti gli elementi HTML possono essere pulsanti.
Ma gli elementi più comuni sono <input>, <tasto>, e <a>:
Esempio
<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> Prova tu stesso " Button Colori
I pulsanti sono disponibili in tutti i colori che avete bisogno di:
Esempio
<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> Prova tu stesso " hover Colori
Passa effetti sono disponibili in tutti i colori che avete bisogno di:
Esempio
<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> Prova tu stesso " forme Button
I pulsanti sono disponibili in tutte le forme che servono:
Esempio
<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>
Prova tu stesso " Misure Button
I pulsanti sono disponibili in tutti i formati desiderati:
Esempio
<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>
Prova tu stesso " Borders Button
I pulsanti possono avere confini.
Esempio
<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>
Prova tu stesso " Pulsanti con effetti di testo
I pulsanti possono avere effetti di testo corsivo e grassetto.
Esempio
<button class="w3-btn">Normal</button>
<button class="w3-btn"><i>Italic</i></button>
<button class="w3-btn"><b>Bold</b></button>
Prova tu stesso " I pulsanti possono avere effetti di testo ombra.
Esempio
<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>
Prova tu stesso " I pulsanti possono avere effetti di testo sottile e in largo.
Esempio
<button class="w3-btn">Normal</button>
<button class="w3-btn
w3-slim">Slim</button>
<button class="w3-btn w3-wide">Wide</button>
Prova tu stesso " Pulsanti Full-width
Per creare un pulsante a tutta larghezza, aggiungere la classe w3-btn-block ad un elemento.
pulsanti tutta larghezza hanno una larghezza di 100%, e copre l'intera larghezza dell'elemento genitore:
Esempio
<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> Prova tu stesso " Hover Effetti / Pulsanti disabili
I pulsanti si distingue quando il mouse su di loro.
pulsanti visualizzazione normale un puntatore dito.
pulsanti disabili sono opache e visualizzano un "nessun segno di parcheggio".
Esempio
<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> Prova tu stesso " gruppi di pulsanti
I pulsanti possono essere raggruppati insieme (senza spazio in mezzo) con "w3-btn-gruppo":
Esempio
<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>
Prova tu stesso " Tasti con effetti a catena
I pulsanti possono avere effetti a catena quando si fa clic su:
Esempio
<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>
Prova tu stesso " Elementi Button
Con W3.CSS, tutti gli elementi possono essere un pulsante.
Un'immagine può essere un pulsante
Qualsiasi div, intestazione, piè di pagina o altri contenitori possono essere un pulsante.
Pulsanti galleggiante
Il floating-w3-btn classe, crea pulsanti circolari che sono pensati per importanti funzioni:
Esempio
<a class="w3-btn-floating w3-teal">+</a>
<a
class="w3-btn-floating w3-disabled">+</a>
Prova tu stesso " Utilizzare la grande w3-btn-floating-class per i grandi pulsanti galleggianti:
Esempio
<a class="w3-btn-floating-large w3-teal">+</a>
<a
class="w3-btn-floating-large w3-disabled">+</a>
Prova tu stesso "