W3.CSS Düğmeleri
W3.CSS Düğme Sınıfları
W3.CSS, düğmeler için aşağıdaki sınıfları sağlar:
| Sınıf | tanımlar |
|---|---|
| w3-btn | Vurgulu gölge efektine sahip dikdörtgen bir düğme. Varsayılan renk siyahtır. |
| w3 düğmesi |
Gri vurgulu efektli dikdörtgen bir düğme. W3.CSS sürüm 3'te varsayılan renk açık gridir. Varsayılan renk, sürüm 4'teki ana öğeden devralınır. |
| w3 çubuğu |
Düğmeleri birlikte gruplamak için kullanılabilen yatay bir çubuk. (Yatay gezinme menüleri için mükemmel) |
| w3-blok | Tam genişlikte (%100) bir düğme tanımlamak için kullanılabilen sınıf. |
| w3-daire | Dairesel bir düğme tanımlamak için kullanılabilir. |
| w3-dalgalanma | Dalga efekti oluşturmak için kullanılabilir. |
Düğmeler
Hem w3-button sınıfı hem de w3-btn sınıfı, herhangi bir HTML öğesine düğme davranışı ekler.
Kullanılacak en yaygın öğeler <input type="button">, <button> ve <a>'dır:
Örnek
<input class="w3-button w3-black" type="button" value="Input Button">
<button class="w3-button w3-black">Button Button</button>
<a href="https://www.w3schools.com" class="w3-button w3-black">Link Button</a>
<input class="w3-btn w3-black" type="button" value="Input Button">
<button class="w3-btn w3-black">Button Button</button>
<a href="https://www.w3schools.com" class="w3-btn w3-black">Link Button</a>
Düğme Renkleri
Düğmelere renk eklemek için tüm w3- renk sınıfları kullanılır:
Örnek
<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>
vurgulu renkler
Hover efektleri de tüm renklerde gelir. İşte bazıları:
w3- hover - color sınıfları, düğmelere vurgulu renk eklemek için kullanılır:
Örnek
<button class="w3-button w3-hover-black">Black</button>
<button class="w3-button w3-hover-red">Red</button>
<button class="w3-button w3-hover-purple">Purple</button>
Düğme Şekilleri
w3-round- size sınıfları , düğmelere yuvarlak kenarlıklar eklemek için kullanılır:
Örnek
<button class="w3-button w3-round">Round</button>
<button class="w3-button w3-round-large">Rounder</button>
<button class="w3-button w3-round-xlarge">and Rounder</button>
<button class="w3-button w3-round-xxlarge">and Rounder</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>
Düğme Boyutları
w3- boyutu sınıfları , farklı metin boyutlarını tanımlamak için kullanılabilir:
Örnek
<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>
Düğme Kenarlıkları
w3-border sınıfı , düğmelere kenarlık eklemek için kullanılabilir.
w3-border- color sınıfları , kenarlığın rengini tanımlamak için kullanılır:
Örnek
<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>
İpucu: Yuvarlak kenarlıklar eklemek için w3-round boyutu sınıfını ekleyin.
Farklı Metin Efektleri Olan Düğmeler
Düğmeler daha geniş bir metin efekti kullanabilir:
w3-wide sınıfı , daha geniş bir metin efekti ekler:
Örnek
<button class="w3-button">Normal</button>
<button class="w3-button w3-wide">Wide</button>
Düğmelerin italik ve kalın metin efektleri olabilir:
Düğme metnine italik veya kalın efekt eklemek için standart HTML etiketlerini (<i> ve <b>) kullanın:
Örnek
<button class="w3-button"><i>Italic</i></button>
<button class="w3-button"><b>Bold</b></button>
Dolgulu Düğmeler
w3-padding- size sınıfları , düğme metninin etrafına fazladan dolgu eklemek için kullanılır:
Örnek
<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>
Tam genişlikte Düğmeler
Tam genişlikte bir düğme oluşturmak için düğmeye w3-block sınıfını ekleyin.
Tam genişlikteki düğmelerin genişliği %100'dür ve ana öğenin tüm genişliğini kapsar:
Örnek
<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>
İpucu: Düğme metnini w3-left-align sınıfıyla veya w3-right-align sınıfıyla hizalayın.
Bir bloğun boyutu style="width:" kullanılarak tanımlanabilir .
Örnek
<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>
Devre Dışı Düğmeler
Düğmeler bir gölge efektiyle öne çıkıyor ve fare üzerlerine gelindiğinde imleç bir ele dönüşüyor.
Devre dışı bırakılan düğmeler opaktır (yarı saydam) ve "park yapılmaz işareti" görüntüler:
w3-disabled sınıfı , devre dışı bırakılmış bir düğme oluşturmak için kullanılır (eğer öğe standart HTML devre dışı niteliğini destekliyorsa, bunun yerine devre dışı niteliğini kullanabilirsiniz):
Örnek
<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>
<a class="w3-btn w3-disabled" href="https://www.w3schools.com">Link Button</a>
<button class="w3-btn" disabled>Button</button>
<input type="button" class="w3-btn" value="Button" disabled>
Düğme Çubukları
Düğmeler, w3-bar sınıfı kullanılarak yatay bir çubukta birlikte gruplandırılabilir :
Örnek
<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>
w3-bar sınıfı, W3.CSS sürüm 2.93 / 2.94'te tanıtıldı.
Düğmeler, w3-bar-item sınıfı kullanılarak aralarında boşluk bırakılmadan birlikte gruplanabilir :
Örnek
<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>
Düğme çubukları w3-center sınıfı kullanılarak ortalanabilir :
Örnek
<div class="w3-center">
<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-disabled">Button</button>
</div>
</div>
Aynı satırda iki (veya daha fazla) düğme çubuğu göstermek için w3-show-inline-block sınıfını ekleyin:
Örnek
<div class="w3-show-inline-block">
<div class="w3-bar">
<button class="w3-btn">Button</button>
<button
class="w3-btn w3-teal">Button</button>
<button class="w3-btn
w3-disabled">Button</button>
</div>
</div>
<div
class="w3-show-inline-block">
<div
class="w3-bar">
<button class="w3-btn">Button</button>
<button
class="w3-btn w3-teal">Button</button>
<button class="w3-btn
w3-disabled">Button</button>
</div>
</div>
Gezinme Çubukları
Düğme çubukları, gezinme çubukları olarak kolayca kullanılabilir:
Örnek
<div class="w3-bar w3-black">
<button class="w3-bar-item
w3-button">Button</button>
<button class="w3-bar-item
w3-button">Button</button>
<button class="w3-bar-item
w3-button">Button</button>
</div>
Her öğenin boyutu, style="width:" kullanılarak tanımlanabilir :
Örnek
<div
class="w3-bar">
<button class="w3-bar-item w3-button"
style="width:33.3%">Button</button>
<button class="w3-bar-item w3-button
w3-teal" style="width:33.3%">Button</button>
<button
class="w3-bar-item w3-button w3-red" style="width:33.3%">Button</button>
</div>
Bu eğitimde daha sonra navigasyon hakkında daha fazla bilgi edineceksiniz.
Sol ve Sağ Düğmeler
Düğmeleri sola veya sağa kaydırmak için .w3-left sınıfını ve .w3-right sınıfını kullanın:
"Önceki/sonraki" düğmeleri oluşturmak için kullanılır:
Örnek
<div class="w3-bar">
<button class="w3-button w3-left">Left</button>
<button class="w3-button w3-right">Right</button>
</div>
Dalgalanma Efektli Düğmeler
The w3-ripple class creates a ripple effect on buttons (when they are clicked on):
Example
<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>
All Elements Can Be Buttons
With W3.CSS, all elements can be a button:
A picture can be a w3-button
A picture can be a w3-btn
Any div, header, footer or other containers can be a w3-btn!
Circular Buttons
The w3-circle class can be used to create circular buttons:
Example
<button class="w3-button w3-circle w3-black">+</button>
<button class="w3-button w3-circle w3-teal">+</button>
Square buttons:
Example
<button class="w3-button w3-black">+</button>
<button
class="w3-button w3-teal">+</button>