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>
<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">
<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 »
 | 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>
<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>
<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>
<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>
<Jenis Tombol = "tombol" class = "tombol dinonaktifkan"> Tombol Dinonaktifkan </ button>
Coba »