W3.CSS tugmalar
Tugmalar
W3.CSS tugmalarni yaratish va ularga uslub berishni osonlashtiradi.
Tugmalar turli rang, o‘lcham, chegara, yumaloq burchaklar, hover effektlari va boshqa xususiyatlarga ega bo‘lishi mumkin.
Oddiy tugmalar
w3-button klassi W3.CSS tugmasini yaratadi:
Misol
<button class="w3-button w3-black">Button</button>
<button class="w3-button w3-green">Button</button>
<button class="w3-button w3-blue">Button</button>
O‘zingiz sinab ko‘ring »
Tugma elementlari
w3-button klassini quyidagi kabi turli HTML elementlari bilan ishlatish mumkin:
<input><button><a>
Misol
<input class="w3-button w3-black" type="button" value="Input Button">
<button class="w3-button w3-black">Button</button>
<a href="#" class="w3-button w3-black">Link Button</a>
O‘zingiz sinab ko‘ring »
w3-button va w3-btn
W3.CSS ikkita asosiy tugma klassini taqdim etadi:
| Klass | Tavsif |
|---|---|
w3-button |
Kulrang hover effektli tugma. Standart rangi meros qilib olinadi. |
w3-btn |
Soyali hover effektli tugma. Standart rangi — qora. |
Farqni ko‘rish uchun sichqonchani tugmalar ustiga olib boring:
Misol
<button class="w3-button w3-black">w3-button</button>
<button class="w3-btn w3-black">w3-btn</button>
O‘zingiz sinab ko‘ring »
Qaysi birini ishlatish kerak?
Aksariyat tugmalar uchun w3-button klassidan foydalaning.
Soyali hover effekti kerak bo‘lganda w3-btn klassidan foydalaning.
Tugma ranglari
Tugma rangini o‘zgartirish uchun istalgan W3.CSS rang klassini qo‘shing:
Misol
<button class="w3-button w3-black">Black</button>
<button class="w3-button w3-red">Red</button>
<button class="w3-button w3-blue">Blue</button>
<button class="w3-button w3-green">Green</button>
O‘zingiz sinab ko‘ring »
Hover ranglari
Sichqoncha tugma ustiga olib borilganda rangini o‘zgartirish uchun w3-hover-color klassidan foydalaning.
Misol
<button class="w3-button w3-hover-black">Black</button>
<button class="w3-button w3-hover-red">Red</button>
<button class="w3-button w3-hover-blue">Blue</button>
O‘zingiz sinab ko‘ring » Boshqa ranglarni sinab ko‘ring »
Yumaloq tugmalar
Tugma klasslarini W3.CSS’ning round klasslari bilan birga ishlating:
Misol
<button class="w3-button w3-blue w3-round">Round</button>
<button class="w3-button w3-blue w3-round-large">Large</button>
<button class="w3-button w3-blue w3-round-xlarge">XLarge</button>
<button class="w3-button w3-blue w3-round-xxlarge">XXLarge</button>
O‘zingiz sinab ko‘ring »
Tugma o‘lchamlari
Turli o‘lchamdagi tugmalar yaratish uchun W3.CSS shrift o‘lchami klasslaridan foydalaning:
Misol
<button class="w3-button w3-small">Small</button>
<button class="w3-button">Normal</button>
<button class="w3-button w3-large">Large</button>
<button class="w3-button w3-xlarge">XLarge</button>
O‘zingiz sinab ko‘ring »
Tugma chegaralari
Tugma klasslarini chegara (border) va round klasslari bilan birga ishlating:
Misol
<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-white w3-border w3-border-red w3-round-large">Button</button>
O‘zingiz sinab ko‘ring »
To‘liq kenglikdagi tugmalar
w3-block klassi tugmani ota elementining butun kengligi bo‘ylab cho‘zadi:
Faol bo‘lmagan (disabled) tugmalar
Tugmani faolsizlantirish uchun standart HTML disabled atributidan foydalaning:
Misol
<button class="w3-button w3-black">Enabled</button>
<button class="w3-button w3-black" disabled>Disabled</button>
O‘zingiz sinab ko‘ring »
disabled atributini qo‘llab-quvvatlamaydigan HTML elementlari uchun w3-disabled klassidan foydalaning.
Kartochka amallarini yaratish
Tugmalar ko‘pincha kartochkalar ichida amal tugmalari sifatida ishlatiladi.
Norway
Explore mountains, fjords, and the Northern Lights.
Misol
<div class="w3-card">
<div class="w3-container">
<h3>Norway</h3>
<p>Explore mountains, fjords, and the Northern Lights.</p>
</div>
<div class="w3-container w3-padding-16">
<button class="w3-button w3-green w3-round-large">Explore</button>
<button class="w3-button w3-white w3-border w3-round-large">Learn More</button>
</div>
</div>
O‘zingiz sinab ko‘ring »
Tugmaning ichki bo‘shlig‘i (padding)
Tugma ichidagi bo‘shliqni o‘zgartirish uchun padding klasslaridan foydalaning.
Misol
<button class="w3-button w3-padding-small">Small Padding</button>
<button class="w3-button">Normal Padding</button>
<button class="w3-button w3-padding-large">Large Padding</button>
O‘zingiz sinab ko‘ring »
Tugmalar paneli (bar)
Tugmalarni bir guruhga birlashtirish uchun w3-bar klassidan foydalaning.
Misol
<div class="w3-bar">
<button class="w3-button w3-black">Home</button>
<button class="w3-button w3-teal">News</button>
<button class="w3-button w3-red">Contact</button>
</div>
O‘zingiz sinab ko‘ring »
Tugmalarni bir guruhga birlashtirish uchun w3-bar va w3-bar-item klasslaridan foydalaning.
Misol
<div class="w3-bar">
<button class="w3-bar-item w3-button w3-black">Home</button>
<button class="w3-bar-item w3-button w3-black">News</button>
<button class="w3-bar-item w3-button w3-black">Contact</button>
</div>
O‘zingiz sinab ko‘ring »
To‘lqin (ripple) effektli tugmalar
w3-ripple klassi tugma bosilganda to‘lqin (ripple) effektini qo‘shadi.
Misol
<button class="w3-button w3-black w3-ripple">Click Me</button>
<button class="w3-button w3-red w3-ripple">Click Me</button>
O‘zingiz sinab ko‘ring »
Doira shaklidagi tugmalar
Doira shaklidagi tugmalar yaratish uchun w3-button klassini w3-circle bilan birga ishlating.
Misol
<button class="w3-button w3-circle w3-black">+</button>
<button class="w3-button w3-circle w3-green">+</button>
O‘zingiz sinab ko‘ring »
Matn effektli tugmalar
Tugmalarda matn effektlaridan foydalanish mumkin:
w3-wide klassi matnni kengroq ko‘rsatish effektini qo‘shadi:
Misol
<button class="w3-button">Normal</button>
<button class="w3-button w3-wide">Wide</button>
Tugma matniga kursiv va qalin effektlar berish mumkin:
Tugma matniga kursiv yoki qalin effekt berish uchun standart HTML teglaridan (<i> va <b>) foydalaning:
Misol
<button class="w3-button"><i>Italic</i></button>
<button class="w3-button"><b>Bold</b></button>
Navigatsiya panellari
Tugmalar panelini osongina navigatsiya paneli sifatida ishlatish mumkin:
Misol
<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>
Har bir elementning o‘lchamini style="width:" yordamida belgilash mumkin:
Misol
<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>
Navigatsiya haqida ushbu darslikning keyingi qismlarida ko‘proq bilib olasiz.
Har qanday element tugma bo‘la oladi
W3.CSS yordamida istalgan element tugma bo‘lishi mumkin:
Rasm ham w3-button bo‘la oladi
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!