Mendesain tautan (hyperlink) yang menarik dan informatif adalah bagian penting dari desain web yang baik. Tautan bukan hanya sekadar teks yang bisa diklik, melainkan elemen interaktif yang memberikan navigasi dan petunjuk visual kepada pengguna. Dengan CSS, Anda bisa mengubah tampilan tautan agar lebih sesuai dengan keseluruhan desain website Anda.
Tautan memiliki empat “state” atau kondisi yang bisa Anda atur tampilannya dengan menggunakan pseudo-class:
a:link: Kondisi tautan yang belum pernah dikunjungi.a:visited: Kondisi tautan yang sudah pernah dikunjungi oleh pengguna.a:hover: Kondisi saat kursor mouse berada di atas tautan.a:active: Kondisi saat tautan sedang diklik.
Penting untuk diingat bahwa urutan penulisan pseudo-class ini di dalam file CSS harus sesuai dengan urutan LVHA (:link, :visited, :hover, :active) agar aturan CSS bisa diterapkan dengan benar.
Properti CSS untuk Mengatur Tautan
Berikut adalah beberapa properti CSS yang paling umum digunakan untuk memformat tautan:
color
Mengubah warna teks tautan. Ini adalah properti yang paling sering digunakan untuk membedakan antara tautan yang sudah dan belum dikunjungi, atau untuk memberikan efek saat di-hover.
a:link {
color: #007bff; /* Warna biru untuk tautan yang belum dikunjungi */
}
a:visited {
color: #6610f2; /* Warna ungu untuk tautan yang sudah dikunjungi */
}
text-decoration
Properti ini sangat berguna untuk menghilangkan garis bawah yang muncul secara default pada tautan. Nilai none adalah yang paling umum digunakan. Anda bisa mengaktifkan garis bawah kembali saat di-hover untuk memberikan petunjuk visual.
a {
text-decoration: none; /* Menghilangkan garis bawah default */
}
a:hover {
text-decoration: underline; /* Menambahkan garis bawah saat di-hover */
}
background-color
Mengubah warna latar belakang tautan. Ini sering digunakan bersama dengan hover untuk menciptakan efek visual yang lebih menarik, seperti mengubah tautan menjadi sebuah tombol saat kursor berada di atasnya.
a:hover {
background-color: #e9ecef; /* Latar belakang abu-abu saat di-hover */
color: #212529; /* Mengubah warna teks */
}
font-weight
Mengubah ketebalan teks tautan. Anda dapat membuat teks menjadi tebal saat di-hover untuk menyorotnya.
a:hover {
font-weight: bold;
}
cursor
Properti cursor dapat digunakan untuk mengubah jenis kursor saat berada di atas tautan. Meskipun kursor default untuk tautan adalah pointer, Anda dapat mengubahnya sesuai kebutuhan.
a:hover {
cursor: pointer;
}
Contoh Praktis
Berikut adalah contoh lengkap bagaimana Anda bisa memformat tautan untuk menciptakan efek interaktif yang bersih dan profesional.
/* Aturan dasar untuk semua tautan */
a {
color: #007bff;
text-decoration: none;
transition: color 0.3s ease-in-out; /* Efek transisi halus */
}
/* Tautan yang sudah dikunjungi */
a:visited {
color: #6610f2;
}
/* Efek saat kursor berada di atas tautan */
a:hover {
color: #0056b3;
text-decoration: underline;
}
/* Efek saat tautan sedang diklik */
a:active {
color: #004085;
}
Dengan menggunakan properti-properti di atas secara strategis, Anda bisa membuat tautan yang tidak hanya berfungsi dengan baik, tetapi juga terlihat menarik dan konsisten dengan desain web Anda.
