tutorial pengembangan web terbaru
 

W3.CSS kancing-kancing


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 "