Advan- Dalam dunia desain web, efek hover merupakan salah satu elemen penting yang bisa bikin tampilan website kamu terlihat lebih interaktif dan keren. Nah, kalau kamu sedang mencari cara untuk mempercantik link atau tombol di halaman websitemu, tutorial membuat hover effect di CSS ini cocok banget buat kamu. Dengan sedikit kode CSS, kamu bisa memberikan efek visual yang menarik setiap kali pengguna mengarahkan kursor ke link atau tombol.
Menambahkan hover effect pada link dan tombol sebenarnya nggak sulit, kok. Kamu cuma butuh beberapa baris kode CSS yang bisa langsung diterapkan ke dalam project website kamu. Kali ini, kita akan membahas beberapa jenis hover effect yang mudah diterapkan dan bisa bikin tampilan website kamu terlihat lebih profesional.
Cara Membuat Hover Effect di CSS
Sekarang, kita masuk ke bagian praktisnya. Sebelum kamu mulai menulis kode, pastikan kamu sudah tahu di mana kamu ingin menerapkan hover effect ini. Apakah itu di tombol CTA (Call to Action) atau mungkin di link navigasi? Berikut beberapa contoh hover effect yang bisa kamu coba.
1. Hover Effect Sederhana pada Link
Biasanya, hover effect sederhana untuk link hanya mengubah warna teks saat dihover. Untuk membuat efek ini, kamu bisa tambahkan kode berikut ke CSS kamu:
a {
color: #000; /* warna awal link */
text-decoration: none; /* hilangkan garis bawah */
}
a:hover {
color: #ff6347; /* warna berubah saat hover */
}
Kode di atas akan mengubah warna link menjadi oranye saat pengguna mengarahkan mouse ke sana. Efek ini sangat mudah dibuat dan bisa langsung memberikan interaksi visual pada halaman web kamu.
Baca Juga: Bagaimana Cara Mengubah Warna Background dengan CSS secara Mudah?
2. Hover Effect dengan Background Color pada Tombol
Kalau kamu ingin efek yang lebih dinamis untuk tombol, kamu bisa bermain dengan perubahan background color. Berikut contohnya:
.button {
background-color: #4CAF50; /* warna awal tombol */
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
.button:hover {
background-color: #45a049; /* warna tombol saat hover */
}
Dengan kode ini, tombol akan berubah warna saat di-hover, memberikan efek seolah-olah tombol tersebut interaktif dan mengundang pengguna untuk mengkliknya.
3. Hover Effect dengan Border Animation
Selain mengubah warna, kamu juga bisa tambahkan animasi pada border tombol atau link. Efek ini memberikan kesan lebih modern dan interaktif. Coba kode berikut untuk efek border animasi:
.button-anim {
padding: 10px 20px;
color: #333;
border: 2px solid #333;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.button-anim::before {
content: “”;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: -100%;
background-color: #333;
transition: all 0.3s ease;
}
.button-anim:hover::before {
left: 0;
}
.button-anim:hover {
color: white;
}
Dengan kode ini, tombol kamu akan terlihat seperti memiliki efek animasi saat di-hover, di mana background warna hitam akan menyapu dari kiri ke kanan.
Baca Juga: Cara Menghubungkan File CSS dengan HTML Secara Efisien
Sekarang kamu sudah tahu cara membuat hover effect di CSS untuk link dan tombol yang keren. Efek-efek ini bisa meningkatkan user experience di website kamu, membuatnya lebih interaktif dan profesional. Mulai dari perubahan warna sederhana hingga animasi border dan shadow, kamu bisa kreasikan berbagai jenis hover effect sesuai kebutuhanmu.
Jika kamu butuh perangkat yang bisa mendukung produktivitasmu dalam mendesain website, tablet ADVAN XTAB sangat layak dipertimbangkan. Spesifikasi yang kuat dan layar yang nyaman membuat tablet ini ideal untuk bekerja di mana saja. Jangan lewatkan kesempatan untuk meningkatkan kualitas pekerjaanmu dengan perangkat yang tepat.***
Editor: Andik Chefasa