Tutorial Cara Mendesain Button Menggunakan CSS

Berikut adalah tutorial cara membuat dan mendesain button menggunakan CSS:

1. Membuat button dengan HTML:

<button class="my-button">Klik saya</button>

2. Mendesain button dengan CSS:

.my-button {
  /* Properti tampilan button */
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  /* Properti animasi ketika dihover */
  transition: background-color 0.3s ease-in-out;
}
.my-button:hover {
  background-color: #0056b3;
}

Hasilnya seperti dibawah ini (Button berwarna biru)

.
.
.

3. Penjelasan CSS di atas:

• .my-button: Menggunakan kelas CSS untuk menargetkan button dengan nama kelas “my-button”.
• background-color: Menentukan warna latar belakang button.
• color: Menentukan warna teks pada button.
• padding: Menentukan jarak antara isi button dengan batas button.
• border: Menentukan garis batas button. Di sini, dihilangkan dengan none.
• border-radius: Menentukan sudut melengkung pada batas button.
• cursor: Menentukan tampilan kursor saat mengarahkan ke button.
• transition: Menentukan animasi ketika menghover button. Di sini, animasi berlangsung selama 0.3 detik dengan efek “ease-in-out”.
• .my-button:hover: Menentukan tampilan button saat dihover (diklik). Di sini, mengubah warna latar belakang button menjadi warna yang lebih gelap.

Dengan mengikuti tutorial di atas, Anda dapat membuat dan mendesain button sesuai kebutuhan Anda menggunakan CSS. Selamat mencoba!

.

.

#Seri Belajar CSS:

• Pengenalan Dasar CSS Untuk Pemula
• Dasar Properties dan Selector pada CSS
• Font text pada CSS
• Menerapkan Google Font
• Memahami Inheritance (Pewarisan)
• Memahami Konsep Box Model CSS (Content, Margin, Padding)
• Memahami Box Sizing
• Memahami Property Display
• Bekerja dengan "text-decoration" & "vertical align"
• Styling Anchor Tags (Link)
• Menambahkan PseudoClasses
• Perbedaan Class dan ID
• Tutorial Cara Mendesain Button Menggunakan CSS
• Tutorial CSS Cara Membuat Menu Horisontal
• CSS Browser Support
• CSS Masa Lalu, Hari Ini dan Masa Depan