Scribd
Unggah
158 tayangan

Cara Membuat Button, Menu Di HTML Dan CSS #2

Teks ringkasan: 1. Artikel menjelaskan cara membuat button dan menu dropdown menggunakan HTML dan CSS. 2. Button dapat dibuat menggunakan tag <button> atau <input> dengan type submit atau reset, sedangkan menu dropdown dapat dibuat dengan menambahkan submenu ke dalam menu utama. 3. CSS digunakan untuk menambahkan gaya seperti warna latar, ukuran huruf, border, dan efek hover pada button, serta menyembunyikan dan men

Diunggah oleh

faiz widadi
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
158 tayangan

Cara Membuat Button, Menu Di HTML Dan CSS #2

Teks ringkasan: 1. Artikel menjelaskan cara membuat button dan menu dropdown menggunakan HTML dan CSS. 2. Button dapat dibuat menggunakan tag <button> atau <input> dengan type submit atau reset, sedangkan menu dropdown dapat dibuat dengan menambahkan submenu ke dalam menu utama. 3. CSS digunakan untuk menambahkan gaya seperti warna latar, ukuran huruf, border, dan efek hover pada button, serta menyembunyikan dan men

Diunggah oleh

faiz widadi
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 8

A.

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.
Dapat di lihat dari gambar di atas tamilan setiap tombol masih belum menarik, sekarang kita lanjut ke langkah
berikutnya untuk membuat style css nya.
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.
B. Cara Membuat Menu Dropdown dengan CSS

Menu adalah sebuah fitur wajib yang perlu ada pada suatu website, Menu sendiri berfungsi sebagai navigasi
pengunjung saat menjelajah halaman satu dengan lainnya di website. Di artikel ini kita akan belajar
bagaimana membuat menu dropdown sederhana menggunakan css.

Menu dapat kita buat dengan fitur dropdown, di mana ketika mouse pointer pengunjung berada di suatu menu
maka fitur dropdown akan menampilkan daftar (list) halaman yang menjadi sub menu dari menu utama tersebut.

Membuat Menu Dropdown Sederhana dengan CSS

Langkah 1 : Membuat file HTMl


Untuk membuat menu kita menggunakan elemen list di html. Kita tau tag <ul> merupakan tag yang digunakan
untuk membuat list dengan tipe tidak terurut (Unordered List).

Nantinya selector pada CSS akan kita deklarasikan melalui atribut class menu, sub-menu serta sub-menu
konten.

CSS kita sertakan secara external yang kita panggil dari bagian <head> melalui sintak:

nantinya pada langkah ke-2 kita akan membuat file style.css

Hasil dari file menu.html diatas adalah:

Hasilnya masih belum bagus karena belum kita buat style nya. Sekarang kita lanjut ke langkah berikutnya.
Langkah 2 – Menambahkan Style CSS

Selanjutnya kita buat file baru dengan nama style.css dengan kode seperti berikut
Tampilan menu menjadi lebih menarik bukan ? Kalian bisa modifikasi daftar menu atau pun warna yang
digunakan sesuai yang kalian inginkan.

Perhatikan cursor mouse ketika menyentuh menu berita maka daftar sub menu akan ditampilkan.

Pada perintah CSS kita membuatnya pada class sub-menu-konten kita buat display: none; artinya elemen ini
tidak akan di tampilkan.

Anda mungkin juga menyukai