operaqqlounge — Button adalah salah satu elemen html yang sering di jumpai pada suatu website, elemen ini biasanya di gunakan untuk submit form atau bisa juga untuk lainnya.
Pada artikel ini saya akan bahas bagaimana cara membuat button di html dan juga css agar tampilan nya lebih menarik.
Di dalam HTML 5, button dapat di buat menggunakan tag <button> namun tidak hanya sebatas itu, tombol button juga bisa di buat menggunakan tag <input> dengan tipe submit atau reset.
Dalam praktiknya membuat button dengan tag <button> jauh lebih fleksibel karena penggunaannya luas, biasanya sering di gunakan dengan event javascript untuk membuat halaman website yang interaktif. Sedangkan untuk tombol dengan tag <input> tipe submit atau reset penggunannya hanya sebatas pada formulir (form) di html.
Selain menggunakan tag <button> dan <input> tipe submit atau reset, tombol juga dapat dibuat dengan hytperlink (link button) dengan memanfaatkan css kita bisa manipulasi elemen link menjadi seperti tombol/button.
Langkah 1 : Membuat Button di HTML
Buatlah sebuah file dengan nama button.html seperti pada kode html berikut:
<!DOCTYPE html>
<html>
<head>
<title>Membuat Button di HTML - www.kelasprogrammer.com</title>
</head>
<body>
<button>Button</button>
<a href="#">Link Button</a>
<input type="submit" value="Submit Button">
<input type="reset" value="Reset Button">
</body>
</html>Hasil
Dapat di lihat dari gambar di atas tamilan setiap tombol masih belum menarik, sekarang kita lanjut ke langkah berikutnya untuk membuat style css nya.
Langkah 2 : Menambahkan Style CSS pada Button
Tambahkan kode di bawah ini pada file button.html yang telah kita buat di atas. Masukan kode ini di antara tag <head> … </head>.
<style>
a, button,input[type=submit],input[type=reset] {
font-family: sans-serif;
font-size: 15px;
background: #22a4cf;
color: white;
border: white 3px solid;
border-radius: 5px;
padding: 12px 20px;
margin-top: 10px;
}
a {
text-decoration: none;
}
a:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover{
opacity:0.9;
}
</style>Hasil:
Penjelasan Kode CSS
Sintak a, button,input[type=submit],input[type=reset] merupakan selector yang terdiri dari elemen html
- a untuk link
- button untuk tombol button
- input[type=submit] untuk tombol submit
- input[type=reset] untuk tombol reset
Karena kita akan membuat bentuk tombol yang sama sehingga kita satukan setiap selector dalam satu deklarasi perintah CSS yang sama.
Properti yang kita gunakan adalah
- font-family: sans-serif; merupakan perintah untuk menentukan jenis huruf yang digunakan yaitu sans-serif.
- font-size: 15px; Perintah untuk ukuran huruf (15 px)
- background: #22a4cf; Untuk membuat warna latar pada button dengan warna biru muda.
- color: white; Untuk membuat menentukan warna teks yaitu menggunakan warna putih.
- border: white 3px solid; Untuk membuat border dengan warna putih dan ketebalan 3px dengan tipe solid.
- border-radius: 5px; untuk membuat setiap sudut button sedeikit melengkung.
- padding: 12px 20px; untuk mengatur jarak atas dan kanan antara teks dengan elemen button .
- margin-top: 10px; untuk mengatur jarak atas antara button dengan elemen lain.
Khusus untuk link kita tambahkan properti text-decoration dengan nilai none untuk menghilangkan dekorasi teks/ garis bawah pada link.
Selanjutnya elemen button juga kita tambahkan efek hover dengan transparansi sebesar 0,9.
Kesimpulan
Sekian artikel mengenai cara membuat tombol (button) di html dengan CSS (Cascading Style Sheets). Semoga membantu teman-teman semua yang lagi belajar desain web.
Tentu saja kalian bisa modifikasi dan mengembangkan sesuai dengan kebutuhan/keinginan kalian.
Yang terpenting adalah mempelajari penggunaan perintah-perintah CSS untuk membuat style yang menarik pada setiap komponen html.