Belajar CSS Part 14 - Link (Hyperlink)

Menerapkan Styling pada Link

Dengan menggunakan CSS, link dapat ditata atau diatur seperti pemberian warna pada link, mengubah link menjadi bentuk tombol (button), membuat tampilan link akan berubah pada saat disentuh, dan lain-lain.

Link dapat ditata dengan properti CSS (misalnya color, font-family, background, dan lain-lain).

Contoh

a {
    color: hotpink;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p><b><a href="https://king-octahasan.blogspot.com" target="_blank">Ini adalah sebuah link</a></b></p>

</body>
</html>

Hasilnya:

Selain itu, link dapat diberi style yang berbeda tergantung pada keadaan di mana mereka berada.

Berikut adalah style yang bisa diterapkan pada link:

a:link - normal, link yang belum dikunjungi
a:visited - link yang telah dikunjungi pengguna
a:hover - link ketika mouse pengguna berada di atasnya
a:active - link saat itu diklik

Contoh

/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p><b><a href="https://king-octahasan.blogspot.com" target="_blank">Ini adalah sebuah link</a></b></p>
<p><b>Catatan:</b> Catatan: a:hover HARUS muncul setelah a:link dan a:visited mendefinisikan CSS agar menjadi efektif.</p>
<p><b>Catatan:</b> a:active MUST muncul setelah a:hover dalam rangka mendefinisikan CSS agar menjadi efektif.</p>

</body>
</html>

Hasilnya:

Saat mengatur style untuk beberapa link, ada beberapa aturan dalam mengurutkannya:

a:hover HARUS muncul setelah a:link dan a:visited
a:active HARUS muncul setelah a:hover

Text Decoration

Properti text-decoration ini kebanyakan digunakan untuk menghapus garis bawah dari sebuah link.

Contoh

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p><b><a href="https://king-octahasan.blogspot.com" target="_blank">Ini adalah sebbuah link</a></b></p>
<p><b>Catatan:</b> a:hover HARUS muncul setelah a:link dan a:visited dalam rangka mendefinisikan CSS agar menjadi efektif.</p>
<p><b>Catatan:</b> a:active HARUS muncul setelah a:hover dalam rangka mendefinisikan CSS agar menjadi efektif.</p>

</body>
</html>

Hasilnya:

Warna Latar Belakang

Properti background-color dapat digunakan untuk menentukan warna latar belakang untuk link.

Contoh

a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p><b><a href="https://king-octahasan.blogspot.com" target="_blank">Ini adalah sebbuah link</a></b></p>
<p><b>Catatan:</b> a:hover HARUS muncul setelah a:link dan a:visited dalam rangka mendefinisikan CSS agar menjadi efektif.</p>
<p><b>Catatan:</b> a:active HARUS muncul setelah a:hover dalam rangka mendefinisikan CSS agar menjadi efektif.</p>

</body>
</html>

Hasilnya:

Advance - Link Button

Contoh berikut ini menunjukkan contoh yang lebih canggih dimana kita menggabungkan beberapa sifat CSS untuk menampilkan link sebagai kotak / tombol.

Contoh

a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

a:hover, a:active {
    background-color: red;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<a href="https://king-octahasan.blogspot.com/" target="_blank">Ini adalah sebuah link</a>

</body>
</html>

Hasilnya: