Cara Membuat Button di HTML dan CSS

 Cara Membuat Button di HTML dan CSS

Button adalah salah satu elemen html yang sering di jumpai pada suatu website, elemen ini biasanya digunakan 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 dibuat 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 digunakan 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</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>

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>

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.

Komentar

Posting Komentar

Postingan Populer