CARA MEMBUAT DAN MENGHIAS BUTTON DI HTML CSS

Memiliki button di website yang menarik dan interaktif bisa mengundang pengunjung untuk lebih aktif. Dengan HTML dan CSS, kamu dapan membuat button sesuai keinginan. Berikut adalah cara membuat dan menghias button di HTML CSS.

Langkah Pertama: Membuat Button Dengan HTML

Langkah awal adalah membuat sebuah button menggunakan HTML. Kamu dapat membuat button dengan menggunakan tag button di HTML.

Berikut adalah contoh penggunaan tag button:

<button type="button">Tekan Aku!</button>

Kode di atas akan menciptakan sebuah button dengan tulisan “Tekan Aku!“. Mudah bukan?

Langkah Kedua: Menghias Button Dengan CSS

Setelah membuat button, selanjutnya adalah menghias button tersebut dengan CSS untuk membuatnya tampak lebih menarik.

Berikut adalah contoh bagaimana cara menghias button dengan CSS:

button {
  background-color: #4CAF50; /* Warna latar belakang */
  color: white; /* Warna teks */
  padding: 15px 32px; /* Padding dan ukuran */
  text-align: center; /* Penataan teks */
  text-decoration: none; /* Dekorasi teks */
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer; /* Cursor saat mouse diatas button */
}

Dengan kode CSS di atas, button kamu akan memiliki latar belakang warna hijau, teks berwarna putih, serta ukuran dan padding yang sudah diatur.

Penambahan Elemen Interaktif

Untuk memaksimalkan penggunaan button, kamu juga dapat menambahkan beberapa efek yang akan bekerja ketika button ditekan atau di-hover. Berikut adalah contohnya:

button:hover {
  background-color: #45a049;
}

button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

Dengan kode di atas, button akan berubah warna saat di-hover dan akan terlihat seperti ditekan ketika diklik.

Hanya dengan langkah-langkah sederhana ini, kamu sudah bisa membuat dan menghias button di HTML CSS. Coba variasi berbeda dan eksplorasi kreativitasmu dalam desain web. Selamat mencoba!