Düğmeler
W3.CSS ile, tüm HTML öğelerini düğmeleri olabilir.
Ama en yaygın unsurlar <input>, <düğmesi> ve şunlardır <a> :
Örnek
<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> Kendin dene " Düğme Renkleri
Düğmeler size gerekli olan tüm renk gelir:
Örnek
<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> Kendin dene " Vurgusu Renkleri
İhtiyacınız olan tüm renk gelir etkileri gelme:
Örnek
<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> Kendin dene " Düğme Şekilleri
Düğmeler size gerekli olan tüm şekiller gelir:
Örnek
<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>
Kendin dene " Düğme Boyutları
Düğmeler size gerekli olan tüm boyutlarda gelir:
Örnek
<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>
Kendin dene " Düğme Sınırlar
Düğmeler sınırları olabilir.
Örnek
<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>
Kendin dene " Metin Efektleri ile Düğmeler
Düğmeler italik ve kalın yazı etkileri olabilir.
Örnek
<button class="w3-btn">Normal</button>
<button class="w3-btn"><i>Italic</i></button>
<button class="w3-btn"><b>Bold</b></button>
Kendin dene " Düğmeler gölge metin etkileri olabilir.
Örnek
<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>
Kendin dene " Düğmeler ince ve geniş metin etkileri olabilir.
Örnek
<button class="w3-btn">Normal</button>
<button class="w3-btn
w3-slim">Slim</button>
<button class="w3-btn w3-wide">Wide</button>
Kendin dene " Tam genişlikte Düğmeler
Tam genişlikli düğmesi oluşturmak için, bir öğeye w3-btn blok sınıf ekleyin.
Tam genişlikli düğmeleri,% 100 kadar bir genişliğe sahiptir, ve üst elemanın tüm genişliği boyunca:
Örnek
<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> Kendin dene " Hover Etkileri / Engelli Düğmeler
Düğmeler üzerlerine size fareyi göze çarpıyor.
Normal düğmeleri parmak işareti görmek.
Engelli düğmeleri opak ve bir gösterilecek "no parking sign" .
Örnek
<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> Kendin dene " Düğme Grupları
Düğmeler birlikte gruplanabilir (without space in between) kullanılarak "w3-btn-group" :
Örnek
<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>
Kendin dene " Dalga Effects ile Düğmeler
onlar üzerinde tıklandığında Düğmeler dalgalanma etkileri olabilir:
Örnek
<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>
Kendin dene " Düğme Elemanları
W3.CSS ile, tüm unsurları bir düğme olabilir.
Bir resim düğme olabilir
Herhangi div, üstbilgi, altbilgi veya diğer kaplar bir düğme olabilir.
Düğmeleri Yüzer
W3-btn-kayan sınıf, önemli fonksiyonlar içindir daire şeklinde düğmeler oluşturur:
Örnek
<a class="w3-btn-floating w3-teal">+</a>
<a
class="w3-btn-floating w3-disabled">+</a>
Kendin dene " Büyük yüzen düğmeleri için w3-btn-kayan büyük sınıfını kullanın:
Örnek
<a class="w3-btn-floating-large w3-teal">+</a>
<a
class="w3-btn-floating-large w3-disabled">+</a>
Kendin dene "