1. Rumah
  2. Yayasan Tombol

Tutorial Yayasan Tombol Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari tombol Style,Ukuran tombol,tombol bulat,ekstensi tombol,tombol Disable,

Yayasan Tombol

tombol Style

Foundation menawarkan enam tombol gaya. .button kelas menciptakan tombol biru bersama-sama dengan padding. warna yang berbeda untuk kelas tombol: .secondary , .success , .info , .warning atau .alert :

contoh

<Tombol type = "button" class = "button"> Default </ button>
<Jenis Tombol = "tombol" class = "tombol sekunder"> Secondary </ button>
<Tombol type = "button" class = "button sukses"> Sukses </ button>
<Tombol type = "button" class = "tombol info"> Info </ button>
<Tombol type = "button" class = "tombol peringatan"> Peringatan </ button>
<Tombol type = "button" class = "tombol alert"> Tanda </ button>

Coba »

kelas tombol dapat digunakan dalam <a> , <button> , atau <input> elemen:

contoh

<A Href = "#" class = "button peran info" = "button"> link Tombol </ a>
<Jenis Tombol = "tombol" class = "tombol info"> Tombol </ button>
<Input type = "button" class = "tombol info" value = "Input Tombol">
<Input type = "submit" class = "tombol info" value = "Submit Button">

Coba »

catatan Mengapa tag href ke #?

Ketika kita tidak ingin melompat dan klik pada link untuk mendapatkan "404" halaman, kita dapat mengatur href tag #.

Ukuran tombol

Kita dapat menggunakan .large , .small atau .tiny kelas untuk mengatur ukuran tombol:

contoh

<Jenis Tombol = "tombol" class = "tombol besar"> Besar </ button>
<Tombol type = "button" class = "button"> Default </ button>
<Jenis Tombol = "tombol" class = "tombol kecil"> Kecil </ button>
<Jenis Tombol = "tombol" class = "tombol kecil"> kecil </ button>

Coba »

tombol bulat

Anda dapat menggunakan .radius dan .round kelas untuk mengatur tombol bulat:

contoh

<Tombol type = "button" class = "button"> Tombol default </ button>
<Tombol type = "button" class = "radius tombol"> Radius Tombol </ button>
<Tombol type = "button" class = "tombol bulat"> Tombol Putaran </ button>

Coba »

ekstensi tombol

Anda dapat menggunakan .expand kelas untuk mengatur tombol untuk 100% broadband:

contoh

<Tombol type = "button" class = "button"> Tombol default </ button>
<Jenis Tombol = "tombol" class = "button memperluas"> Expanded Tombol </ button>

Coba »

tombol Disable

Anda dapat menggunakan .disabled kelas untuk klik tombol Settings tidak tersedia:

contoh

<Tombol type = "button" class = "button"> Tombol default </ button>
<Jenis Tombol = "tombol" class = "tombol dinonaktifkan"> Tombol Dinonaktifkan </ button>

Coba »

Tutorial Panas

Hubungi kami

Yayasan Tombol
10/30