CSS Tombol
Bagian ini, kami memperkenalkan penggunaan CSS untuk membuat tombol.
Tombol Style dasar
Contoh CSS
background-color: # 4CAF50; / * Green * /
border: none;
warna: putih;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
Coba »
warna tombol
Kita dapat menggunakan background-color properti untuk mengatur tombol warna:
Contoh CSS
.button2 {background-color: # 008CBA;} / * Blue * /
.button3 {background-color: # f44336;} / * Red * /
.button4 {background-color: # e7e7e7; warna: hitam;} / * Gray * /
.button5 {background-color: # 555555;} / * Black * /
Coba »
Ukuran tombol
Kita dapat menggunakan font-size properti untuk mengatur ukuran tombol:
Contoh CSS
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
Coba »
tombol bulat
Kita dapat menggunakan border-radius properti untuk mengatur tombol fillet:
Contoh CSS
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
Coba »
Warna perbatasan tombol
Kita dapat menggunakan border properti dari warna tombol border:
Contoh CSS
background-color: white;
warna: hitam;
border: 2px solid # 4CAF50; / * Green * /
}
...
Coba »
Hover Tombol
Kita dapat menggunakan :hover pemilih untuk memodifikasi gaya dengan melayang di atas tombol.
Tip: Kita bisa menggunakan transition-duration properti diatur ke "melayang-layang" kecepatan efek:
Contoh CSS
-webkit-transisi-durasi: 0.4s; / * Safari * /
transisi-durasi: 0.4s;
}
.button: hover {
background-color: # 4CAF50; / * Green * /
warna: putih;
}
...
Coba »
tombol shadow
Kita dapat menggunakan box-shadow properti untuk menambahkan bayangan ke tombol:
Contoh CSS
box-shadow: 0 8px 16px 0 RGBA (0,0,0,0.2), 0 6px 20px 0 RGBA (0,0,0,0.19);
}
.button2: hover {
box-shadow: 0 12px 16px 0 RGBA (0,0,0,0.24), 0 17px 50px 0 RGBA (0,0,0,0.19);
}
Coba »
tombol Disable
Kita dapat menggunakan opacity properti untuk menambahkan transparansi (terlihat mirip dengan "cacat" atribut efek) untuk tombol.
Tip: Apa yang bisa saya tambahkan cursor properti dan set ke "tidak-diperbolehkan" untuk mengatur gambar cacat:
tombol Lebar
Secara default, ukuran teks tombol pada tombol telah memutuskan (berdasarkan teks panjang pencocokan). Kita dapat menggunakan width properti untuk mengatur lebar dari tombol:
Tip: Jika Anda ingin mengatur lebar tetap dapat menggunakan piksel (px) sebagai satu unit, jika Anda ingin mengatur tombol responsif dapat diatur sebagai persentase.
tombol Grup
Hapus dari luar dan menambahkan float:left mengatur tombol:
Dengan perbatasan Tombol Grup
Kita dapat menggunakan border properti untuk mengatur kelompok tombol dengan perbatasan: