Beranda
Blogging

Cara Membuat Button di HTML dengan Desain Menarik dan Animasi

Anda dapat membuat tombol menggunakan Html dan mendesain tampilannya menggunakan CSS

Button adalah salah satu elemen penting dalam pembuatan website (blog). Elemen ini memudahkan pengunjung untuk berinteraksi dengan website, seperti mengirimkan formulir, beralih halaman, atau menjalankan fungsi tertentu.

Dalam artikel ini, saya akan membahas cara membuat button dengan HTML, mendesainnya menggunakan CSS, dan menambahkan animasi interaktif dengan JavaScript agar tampilan website lebih menarik.

Membuat Button Dasar dengan Tag <button>

Langkah pertama adalah membuat button menggunakan HTML. Anda cukup menggunakan tag <button> seperti contoh berikut:

<button> Contoh  </button>

Hasilnya adalah button sederhana yang dapat diklik. Namun, tampilannya masih sangat dasar seperti di bawah ini:

Mendesain botton dengan Css

Agar lebih menarik, Anda dapat menggunakan CSS untuk mempercantik tampilan button. Berikut beberapa properti CSS yang sering digunakan untuk mendesain button:

  • padding : Menentukan ruang di dalam button (horizontal dan vertikal).
  • font-size : Mengatur ukuran teks.
  • text-align : Mengatur posisi teks di dalam button (kiri, tengah, kanan).
  • cursor : Mengubah tampilan cursor saat hover pada button.
  • outline: none; : Menghilangkan garis luar ketika button dipilih atau difokuskan.
  • color : Mengatur warna teks
  • background-color : Memberikan warna latar belakang.
  • border: none; : Menghilangkan border default pada button.
  • border-radius : Membuat sudut button melengkung.
  • box-shadow : Memberikan efek bayangan pada button.

Contoh penerapan kode CSS::

.button {
  padding: 15px 25px; /* Ukuran padding */
  font-size: 24px; /* Ukuran font */
  text-align: center; /* Posisi teks di tengah */
  cursor: pointer; /* Mengubah cursor menjadi pointer saat di-hover*/
  outline: none;
  color: #fff; /* Warna teks */
  background-color: #04AA6D; /* Warna latar belakang */
  border: none;
  border-radius: 15px; /* Sudut button melengkung */
  box-shadow: 0 9px #999;
}

Button dengan desain ini terlihat lebih modern dan menarik.

See the Pen Make Button Step 1 by Muhammad Nasai (@enasa-pro) on CodePen.

Menambahkan Animasi dengan CSS

Untuk membuat button lebih interaktif, tambahkan animasi saat button ditekan atau di-hover.

1. Efek Saat Ditekan

Gunakan pseudo-class :active untuk memberikan efek visual saat button di klik. 
.button:active {
  background-color: #3e8e41;  /* Membuat warna latar belakang saat button ditekan */
  box-shadow: 0 5px #666;     /* Menambahkan bayangan */
  transform: translateY(4px); /* Efek tombol bergerak sedikit ke bawah */
}

See the Pen Button Pressed Effect by Muhammad Nasai (@enasa-pro) on CodePen.

2. Efek Hover

Selain animasi saat aktif, Anda juga bisa menambahkan efek hover untuk membuat button lebih menarik saat pengguna mengarahkan kursor ke atasnya. Berikut adalah contoh efek hover menggunakan CSS:

.button:hover {
  background-color: #45a049; /* Mengubah warna latar belakang saat hover */
  color: #fff; /* Mengubah warna teks saat hover */
  transform: scale(1.05); /* Memperbesar sedikit ukuran button */
}

Dengan efek hover ini, button akan sedikit membesar dan berubah warna saat kursor mouse diletakkan di atasnya. Efek ini memberikan kesan interaktif dan membuat tampilan website lebih hidup.

See the Pen Make Button Step 3 Hover Effect by Muhammad Nasai (@enasa-pro) on CodePen.

Menggunakan JavaScript untuk Fungsionalitas Tambahan

Untuk meningkatkan fungsionalitas button, Anda dapat menambahkan JavaScript. Misalnya, Anda bisa membuat button untuk menampilkan pesan atau mengubah elemen lain di halaman tanpa memuat ulang halaman.

Berikut contoh penggunaan JavaScript dengan button:

<script>
function showMessage() {
  alert("Button diklik!");
}
</script>

Dengan kode di atas, setiap kali button "Klik Saya" ditekan, akan muncul pesan peringatan dengan teks "Button diklik!".

Kesimpulan

Dengan sedikit HTML, CSS, dan JavaScript, Anda dapat membuat button yang tidak hanya fungsional tetapi juga menarik secara visual. Button yang didesain dengan baik dapat meningkatkan pengalaman pengguna dan membuat website Anda terasa lebih interaktif.

Jangan ragu untuk bereksperimen dengan berbagai kombinasi CSS dan animasi agar button di situs Anda semakin menarik. Anda juga bisa menambahkan lebih banyak efek animasi dan transisi untuk menyesuaikan dengan tema website Anda.

Itulah tutorial cara membuat button di HTML dengan desain menarik dan animasi. Jangan lupa untuk terus berkreasi dengan desain button dan meningkatkan interaksi pengguna di website Anda!

Posting Komentar