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
<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
<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
<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 = "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
<Jenis Tombol = "tombol" class = "button memperluas"> Expanded Tombol </ button>
Coba »
tombol Disable
Anda dapat menggunakan .disabled
kelas untuk klik tombol Settings tidak tersedia:
contoh
<Jenis Tombol = "tombol" class = "tombol dinonaktifkan"> Tombol Dinonaktifkan </ button>
Coba »