Tombol W3.CSS
Kelas Tombol W3.CSS
W3.CSS menyediakan kelas-kelas berikut untuk tombol:
| Kelas | Mendefinisikan |
|---|---|
| w3-btn | Tombol persegi panjang dengan efek bayangan melayang. Warna default adalah hitam. |
| tombol w3 |
Tombol persegi panjang dengan efek hover abu-abu. Warna default adalah abu-abu muda di W3.CSS versi 3. Warna default diwarisi dari elemen induk di versi 4. |
| w3-bar |
Bilah horizontal yang dapat digunakan untuk mengelompokkan tombol. (Sempurna untuk menu navigasi horizontal) |
| w3-blok | Kelas yang dapat digunakan untuk menentukan lebar penuh (100%) tombol. |
| w3-lingkaran | Dapat digunakan untuk mendefinisikan tombol melingkar. |
| w3-riak | Dapat digunakan untuk membuat efek riak. |
tombol
Kelas tombol w3 dan kelas w3-btn menambahkan perilaku tombol ke elemen HTML apa pun.
Elemen yang paling umum digunakan adalah <input type="button">, <button>, dan <a>:
Contoh
<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>
Warna Tombol
Semua kelas warna w3- digunakan untuk menambahkan warna ke tombol:
Contoh
<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>
Arahkan Warna
Efek hover juga tersedia dalam semua warna. Berikut adalah beberapa:
Kelas warna w3-hover- digunakan untuk menambahkan warna hover ke tombol:
Contoh
<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>
Bentuk Tombol
Kelas ukuran bulat w3 digunakan untuk menambahkan batas bulat ke tombol:
Contoh
<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>
Ukuran Tombol
Kelas ukuran w3 dapat digunakan untuk menentukan ukuran teks yang berbeda:
Contoh
<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>
Perbatasan Tombol
Kelas w3-border dapat digunakan untuk menambahkan batas ke tombol.
Kelas warna w3-border- digunakan untuk menentukan warna perbatasan:
Contoh
<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>
Tip: Tambahkan kelas w3-round- size untuk menambahkan batas bulat.
Tombol Dengan Efek Teks Berbeda
Tombol dapat menggunakan efek teks yang lebih luas:
Kelas lebar-w3 menambahkan efek teks yang lebih luas:
Contoh
<button class="w3-button">Normal</button>
<button class="w3-button w3-wide">Wide</button>
Tombol dapat memiliki efek teks miring dan tebal:
Gunakan tag HTML standar (<i> dan <b>) untuk menambahkan efek miring atau tebal ke teks tombol:
Contoh
<button class="w3-button"><i>Italic</i></button>
<button class="w3-button"><b>Bold</b></button>
Tombol Dengan Padding
Kelas ukuran bantalan w3 digunakan untuk menambahkan bantalan ekstra di sekitar teks tombol:
Contoh
<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>
Tombol lebar penuh
Untuk membuat tombol dengan lebar penuh, tambahkan kelas blok w3 ke tombol.
Tombol lebar penuh memiliki lebar 100%, dan mencakup seluruh lebar elemen induk:
Contoh
<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>
Tip: Sejajarkan teks tombol dengan kelas w3-left-align atau kelas w3-right-align .
Ukuran blok a dapat ditentukan menggunakan style="width:" .
Contoh
<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>
Tombol yang Dinonaktifkan
Tombol menonjol dengan efek bayangan dan kursor berubah menjadi tangan saat mengarahkan mouse ke atasnya.
Tombol yang dinonaktifkan bersifat buram (semi-transparan) dan menampilkan "tanda dilarang parkir":
Kelas w3-disabled digunakan untuk membuat tombol yang dinonaktifkan (jika elemen mendukung atribut standar HTML yang dinonaktifkan, Anda dapat menggunakan atribut disabled sebagai gantinya):
Contoh
<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>
Bilah Tombol
Tombol dapat dikelompokkan bersama dalam bilah horizontal menggunakan kelas bilah w3 :
Contoh
<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>
Kelas w3-bar diperkenalkan di W3.CSS versi 2.93 / 2.94.
Tombol dapat dikelompokkan bersama tanpa spasi di antaranya dengan menggunakan kelas w3-bar-item :
Contoh
<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>
Bilah tombol dapat dipusatkan menggunakan kelas w3-center :
Contoh
<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>
Untuk menampilkan dua (atau lebih) bilah tombol pada baris yang sama, tambahkan kelas w3-show-inline-block :
Contoh
<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>
Bilah Navigasi
Bilah tombol dapat dengan mudah digunakan sebagai bilah navigasi:
Contoh
<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>
Ukuran setiap item dapat ditentukan dengan menggunakan style="width:" :
Contoh
<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>
Anda akan belajar lebih banyak tentang navigasi nanti dalam tutorial ini.
Tombol Kiri dan Kanan
Gunakan kelas .w3-left dan kelas .w3-right untuk melayangkan tombol ke kiri atau ke kanan:
Digunakan untuk membuat tombol "sebelumnya/berikutnya":
Contoh
<div class="w3-bar">
<button class="w3-button w3-left">Left</button>
<button class="w3-button w3-right">Right</button>
</div>
Tombol Dengan Efek Riak
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>