kancing-kancing
Dengan W3.CSS, semua elemen HTML dapat tombol.
Namun unsur yang paling umum adalah <input>, <button>, dan <a>:
Contoh
<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> Cobalah sendiri " Warna tombol
Tombol datang dalam semua warna yang Anda butuhkan:
Contoh
<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> Cobalah sendiri " Warna Hover
Arahkan efek datang dalam semua warna yang Anda butuhkan:
Contoh
<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> Cobalah sendiri " Bentuk tombol
Tombol datang dalam semua bentuk yang Anda butuhkan:
Contoh
<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>
Cobalah sendiri " ukuran tombol
Tombol datang dalam semua ukuran yang Anda butuhkan:
Contoh
<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>
Cobalah sendiri " Borders tombol
Tombol dapat memiliki batas.
Contoh
<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>
Cobalah sendiri " Tombol dengan Efek Teks
Tombol dapat memiliki efek teks miring dan tebal.
Contoh
<button class="w3-btn">Normal</button>
<button class="w3-btn"><i>Italic</i></button>
<button class="w3-btn"><b>Bold</b></button>
Cobalah sendiri " Tombol dapat memiliki efek bayangan teks.
Contoh
<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>
Cobalah sendiri " Tombol dapat memiliki efek teks ramping dan lebar.
Contoh
<button class="w3-btn">Normal</button>
<button class="w3-btn
w3-slim">Slim</button>
<button class="w3-btn w3-wide">Wide</button>
Cobalah sendiri " Tombol-lebar penuh
Untuk membuat tombol full-width, menambahkan kelas w3-btn-blok untuk sebuah elemen.
tombol-lebar penuh memiliki lebar 100%, dan meliputi seluruh lebar dari elemen induk:
Contoh
<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> Cobalah sendiri " Hover Efek / Buttons Dinonaktifkan
Tombol menonjol ketika Anda mengarahkan mouse atas mereka.
tombol yang normal menampilkan pointer jari.
tombol dinonaktifkan buram dan menampilkan "tidak ada tanda parkir".
Contoh
<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> Cobalah sendiri " Grup tombol
Tombol dapat dikelompokkan bersama-sama (tanpa spasi di antara) menggunakan "w3-btn-kelompok":
Contoh
<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>
Cobalah sendiri " Tombol dengan Efek Ripple
Tombol dapat memiliki efek riak ketika mereka mengklik:
Contoh
<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>
Cobalah sendiri " Elemen tombol
Dengan W3.CSS, semua elemen dapat tombol.
Sebuah gambar bisa menjadi tombol
Setiap div, header, footer atau kemasan lainnya dapat tombol.
mengambang Buttons
The w3-btn-mengambang kelas, menciptakan tombol melingkar yang dimaksudkan untuk fungsi penting:
Contoh
<a class="w3-btn-floating w3-teal">+</a>
<a
class="w3-btn-floating w3-disabled">+</a>
Cobalah sendiri " Menggunakan kelas besar w3-btn-floating-untuk tombol mengambang besar:
Contoh
<a class="w3-btn-floating-large w3-teal">+</a>
<a
class="w3-btn-floating-large w3-disabled">+</a>
Cobalah sendiri "