Butoane
Cu W3.CSS, toate elementele HTML pot fi butoane.
Dar cele mai comune elemente sunt <input>, <buton>, și <a> :
Exemplu
<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> Încearcă - l singur » Culorile butoanelor
Butoanele vin în toate culorile de care aveți nevoie:
Exemplu
<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> Încearcă - l singur » Hover Culori
Treceți cu efecte vin în toate culorile de care aveți nevoie:
Exemplu
<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> Încearcă - l singur » Forme Button
Butoanele vin în toate formele de care aveți nevoie:
Exemplu
<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>
Încearcă - l singur » Dimensiuni Button
Butoanele vin în toate dimensiunile de care aveți nevoie:
Exemplu
<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>
Încearcă - l singur » frontiere Button
Butoanele pot avea margini.
Exemplu
<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>
Încearcă - l singur » Butoane cu efecte de text
Butoanele pot avea efecte de text italic și bold.
Exemplu
<button class="w3-btn">Normal</button>
<button class="w3-btn"><i>Italic</i></button>
<button class="w3-btn"><b>Bold</b></button>
Încearcă - l singur » Butoanele pot avea efecte de text umbra.
Exemplu
<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>
Încearcă - l singur » Butoanele pot avea efecte de text subțire și larg.
Exemplu
<button class="w3-btn">Normal</button>
<button class="w3-btn
w3-slim">Slim</button>
<button class="w3-btn w3-wide">Wide</button>
Încearcă - l singur » Butoane Full-lățime
Pentru a crea un buton full-lățime, adăugați clasa BTN-W3-bloc la un element.
Butoanele Full lățime au o lățime de 100%, și se întinde pe întreaga lățime a elementului mamă:
Exemplu
<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> Încearcă - l singur » Efecte Hover / butoane cu handicap
Butoanele iese în evidență când mouse-ul peste ele.
Butoanele Normal afișa un pointer deget.
Butoanele cu handicap sunt opace și va afișa un "no parking sign" un "no parking sign" de "no parking sign" .
Exemplu
<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> Încearcă - l singur » Grupuri Button
Butoanele pot fi grupate împreună (without space in between) ele "w3-btn-group" (without space in between) , folosind "w3-btn-group" :
Exemplu
<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>
Încearcă - l singur » Butoane cu efecte Ripple
Butoanele pot avea efecte de unda atunci când se dă clic pe:
Exemplu
<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>
Încearcă - l singur » Elemente Button
Cu W3.CSS, toate elementele pot fi un buton.
O imagine poate fi un buton
Orice div, antet, subsol sau alte recipiente pot fi un buton.
plutitoare Butoane
Cele plutitoare BTN-W3 clasa, creează butoane circulare care sunt destinate pentru funcții importante:
Exemplu
<a class="w3-btn-floating w3-teal">+</a>
<a
class="w3-btn-floating w3-disabled">+</a>
Încearcă - l singur » Utilizați clasa mare plutitoare-BTN-W3-pentru butoane mari plutitoare:
Exemplu
<a class="w3-btn-floating-large w3-teal">+</a>
<a
class="w3-btn-floating-large w3-disabled">+</a>
Încearcă - l singur »