tutorial-mendesain-button-css-forweb

Berikut adalah tutorial cara membuat dan mendesain button menggunakan CSS:

  1. Membuat button dengan HTML:
<button class="my-button">Klik saya</button>
  1. 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)

.
.
.

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

.

.

[sc name=”seri-belajar-css”][/sc]