Membuat Button di HTML dan CSS

Apa kabar teman-teman semoga pada sehat semua ya, pada kesempatan kali ini saya akan mencontohkan bagaimana cara membuat button dengan HTML dan CSS, silahkan simak ya....

Button adalah salah satu elemen html yang sering di jumpai pada suatu website, elemen ini biasanya digunakan untuk submit form atau bisa juga untuk lainya, saya akan membahas bagaimana membuat button di HTML dan CSS agar tampilanya lebih menarik.

Di HTML 5 button dapat menggunakan taq <button> namun tidak hanya sebatas itu, tombol button juga bisa di buat menggunkan tag <input> dengan tipe submit atau reset. Membuat tag <button> jauh lebih fleksibel karena penggunaanya luas, biasanya digunakan dengan even javascript untuk membuat halaman website yang interaktif. Sedangkan untuk tombol dangan tag <input> tipe submit atau reset penggunaanya hanya sebatas pada formulir (form) di html.

Selain menggunakan tag <button> dan <input> tipe submit atau reset, tombol juga dapat dibuat dengan hyperlink (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 kode html berikut, silahkan temant-teman ikuti langkah langkahnya..

button.html

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Button di HTML - https://gilakodingan.blogspot.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 dilihat dari gambar di atas tampilan setiap tombol masih belum menarik dan polos, sekarang kita akan membuat tampilan menjadi menarik, 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 tadi, dan masukan kode ini di anatara <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 :

Sintak a, button, input[type=submit], input[type=reset] merupakan selector yang terdiri dari element 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: sana-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 3px dengan tipe solid.
border-radius: 5px; Untuk membuat setiap sudut button sedikit 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, selanjtnya elemen button juga kita tambahkan efek hover dengan transparansi sebesar 0,9.

Sekian artikel tentang cara membuat tombol button di HTML dna CSS semoga membantu teman-teman dan bermanfaat bagi semua, jangan mudah enyerah dan tetap mempelajari penggunaan perintah-perintah CSS untuk membuat style yang menarik pada setiap komponen html.

See the Pen Membuat Button di HTML dan CSS by Budiatu (@budiatu1) on CodePen.