Link Style
Link adalah elemen fundamental di web. Tanpa styling, link hanya akan terlihat sebagai teks biru bergaris bawah. Dengan CSS, kamu bisa mengubah tampilan link berdasarkan status interaksinya (apakah sudah diklik, sedang disentuh kursor, atau sedang aktif) menggunakan Pseudo-classes.
1. Penjelasan
Link memiliki life cycle status yang berbeda. CSS menyediakan empat pseudo-classes utama untuk menangani status ini agar user experience (UX) menjadi lebih intuitif:
:link: Status default link yang belum pernah dikunjungi.:visited: Status link yang sudah pernah diklik/dikunjungi oleh user sebelumnya (berdasarkan history browser).:hover: Status saat kursor mouse berada di atas link.:active: Status saat link sedang diklik (tepat saat tombol mouse ditekan).
Aturan Urutan: Kamu harus menuliskan selector ini dalam urutan yang benar agar berfungsi: :link, :visited, :hover, :active. Jika urutannya berantakan, beberapa style mungkin tidak akan muncul karena tertimpa oleh aturan lainnya.
2. Properti
Berikut adalah cara menuliskan styling link:
/* Link yang belum dikunjungi */
a:link {
color: #3498db;
text-decoration: none; /* Menghapus garis bawah bawaan */
transition: 0.3s; /* Memberikan efek transisi halus */
}
/* Link yang sudah dikunjungi */
a:visited {
color: #9b59b6;
}
/* Link saat disentuh kursor */
a:hover {
color: #2980b9;
text-decoration: underline;
}
/* Link saat sedang diklik */
a:active {
color: #e74c3c;
}3. Studi Kasus: Membuat Tombol "Call to Action" (CTA)
Bayangkan kamu sedang membuat landing page dan butuh tombol "Daftar Sekarang" yang menarik, namun secara teknis itu hanyalah sebuah tag <a>.
<a href="#" class="btn-cta">Daftar Sekarang</a>.btn-cta:link, .btn-cta:visited {
background-color: #2ecc71;
color: white;
padding: 12px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
border-radius: 8px;
font-weight: bold;
}
.btn-cta:hover {
background-color: #27ae60;
transform: translateY(-2px); /* Memberikan efek sedikit melayang */
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.btn-cta:active {
background-color: #1e8449;
transform: translateY(0); /* Kembali ke posisi semula saat diklik */
box-shadow: none;
}