HTML adalah fondasi dari dunia web. Kalau lo lagi belajar coding, pasti bakal ketemu sama elemen-elemen dasar HTML, salah satunya link alias tautan. Nah, di artikel ini, kita bakal bahas tentang HTML links dengan warna beda-beda dan juga link buttons. Yuk, kita kupas sampai tuntas biar makin jago bikin website kece!
Apa itu HTML Link?
HTML link adalah elemen yang dipakai buat ngehubungin satu halaman ke halaman lain, baik di website lo sendiri atau ke website lain. Link ini ditandai dengan tag <a> (anchor). Contohnya kayak gini:
<a href="https://www.website.com">Klik di sini</a>
Mudah banget, kan? Tapi, jangan salah, link itu punya banyak trik yang bisa bikin website lo lebih menarik. Salah satunya adalah warna link yang bisa diatur sesuai selera.
HTML Links – Warna yang Beda-Beda
Pernah liat link yang warnanya berubah setelah diklik? Itu bukan kebetulan, bestie! Secara default, HTML punya aturan warna link kayak gini:
- Link Belum Dikunjungi (Unvisited)
Biasanya warna biru (#0000FF). Ini default-nya link yang belum pernah lo klik. - Link yang Sudah Dikunjungi (Visited)
Setelah lo klik, warnanya jadi ungu (#800080). - Link yang Sedang Di-hover
Kalau kursor lo diem di atas link, biasanya warnanya berubah jadi lebih terang, misalnya biru muda atau underline muncul. - Link yang Aktif (Active)
Link yang lagi lo tekan warnanya beda lagi, seringnya jadi merah (#FF0000).
Cara Custom Warna Link dengan CSS
Biar link lo nggak monoton, lo bisa kasih style sendiri pakai CSS. Contohnya kayak gini:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Warna Link</title>
<style>
a:link {
color: green; /* Link yang belum dikunjungi */
}
a:visited {
color: purple; /* Link yang sudah dikunjungi */
}
a:hover {
color: orange; /* Link saat di-hover */
}
a:active {
color: red; /* Link saat aktif */
}
</style>
</head>
<body>
<h1>Contoh HTML Link</h1>
<a href="https://www.google.com">Google</a>
</body>
</html>
Kenapa Perlu Custom Warna Link?
- User Experience (UX): Warna yang beda bikin pengunjung tahu mana link yang udah diklik.
- Branding: Bisa disesuaikan dengan tema atau warna brand.
- Estetika: Website lo jadi lebih enak dilihat.
Link Buttons – Apa Bedanya sama Link Biasa?
Nah, sekarang kita masuk ke topik link buttons. Link biasa kelihatan seperti teks yang bisa diklik. Tapi gimana kalau lo mau bikin link yang tampilannya kayak tombol? Tenang, HTML dan CSS bisa bantu lo bikin itu!
Cara Bikin Link Jadi Tombol
1. Pakai CSS
Tambahin style ke <a> biar tampilannya kayak tombol.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link Button</title>
<style>
.btn {
display: inline-block;
padding: 10px 20px;
color: white;
background-color: blue;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
}
.btn:hover {
background-color: darkblue;
}
</style>
</head>
<body>
<h1>Contoh Link Button</h1>
<a href="https://www.website.com" class="btn">Klik Aku</a>
</body>
</html>
2. Pakai Bootstrap
Kalau mau cara instan, lo bisa pakai framework kayak Bootstrap. Tinggal tambahin class btn ke <a>.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<a href="https://www.website.com" class="btn btn-primary">Klik Aku</a>
Kapan Pakai Link Buttons?
- Kalau lo butuh navigasi yang lebih mencolok.
- Buat call-to-action (CTA), misalnya tombol “Beli Sekarang” atau “Daftar”.
- Kalau lo mau link yang nggak kelihatan kayak teks biasa.
Tips dan Trik Biar Link Lo Kece
- Gunakan Kontras yang Pas
Jangan bikin link lo susah dilihat. Warna link harus beda dari background biar jelas. - Tambahkan Hover Effect
Hover effect bikin link lo lebih interaktif. Ini penting buat ningkatin UX. - Hindari Underline di Tombol
Kalau bikin link button, matiin underline dengantext-decoration: none;. - Responsif Itu Wajib
Link dan tombol harus bisa dipakai di semua perangkat, termasuk layar kecil kayak HP.
Kesimpulan
HTML links dan link buttons itu elemen kecil yang punya efek besar buat website lo. Dengan nge-custom warna link dan bikin link button, lo bisa bikin website lo lebih user-friendly, menarik, dan sesuai branding.
Jadi, tunggu apa lagi? Cobain tips di atas dan kasih sentuhan kreatif ke website lo. Semangat belajar, coder!
Komentar