Cara membuat tombol menu di html

Question

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.

Table of Contents Show

Langkah 1 : Membuat Button di HTML
Langkah 2 : Menambahkan Style CSS pada Button
Penjelasan Kode CSS
Artikel lainnya
Apa elemen HTML untuk membuat sebuah drop down list?
Apa yang dimaksud menu dropdown?
Apa itu navigasi dalam HTML?

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 - 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.

Artikel lainnya

Membuat desain form login dengan css
Mempercantik tampilan tabel dengan css
Membuat menu dropdown dengan css

Apa elemen HTML untuk membuat sebuah drop down list?

Perhatikan pada file menu.html di atas, untuk membuat menu dropdown, element HTML yang kita gunakan adalah element <ul> <li> .

Anda pasti tidak asing dengan istilah dropdown menu. Dropdown menu merupakan sebuah elemen kontrol grafis yang memunculkan daftar agar pengguna dapat memilih salah satu dari daftar menu yang ada.

Apa itu navigasi dalam HTML?

Nav adalah element pada HTML yang dibuat untuk mempresentasikan link navigasi. Bisa dibilang, nav adalah wadah dari link yang akan men direct kita ke halaman lain. Tetapi link yang berada pada element <nav> biasanya adalah link major yang merujuk kepada halaman lain pada website kita.

kode html Codingan dropdown HTML