Dengan menggunakan CSS, link dapat dibuat dengan berbagi style yang berbeda. Sehingga tampilan halaman web akan terlihat lebih menarik. Lalu bagaimana cara untuk membuat link dengan style yang berbeda? Jawabannya ada pada bahasan kali ini.
Section Artikel
Membuat style pada sebuah link dapat dilakukan dengan menggunakan properti-properti yang ada pada CSS (misalnya color, font-family, background-color, dan lain-lain).
Contoh:
<!DOCTYPE html> <html> <head> <style> a { color: hotpink; } </style> </head> <body> <p><b><a href="default.asp" target="_blank">Ini adalah link</a></b></p> </body> </html>
Selain itu, sebuah link dapat diberi style berbeda tergantung pada statusnya.
Berikut adalah empat status pada link:
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
/* 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;
}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">Ini adalah link</a></b></p>
<p><b>Catatan:</b> Pada definisi CSS a: hover HARUS muncul setelah a: link dan a: visited agar efektif.</p>
<p><b>Catatan:</b> Pada definisi CSS a: active HARUS muncul setelah a: hover agar efektif.</p>
</body>
</html>
Ada aturan pada status yang harus di setting berurutan ketika mengatur style sebuah link , berikut aturannya:
Properti text-decoration pada CSS biasanya digunakan untuk menghapus garis bawah (underline) dari sebuah link.
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">Ini adalah link</a></b></p>
<p><b>Catatan:</b> Pada definisi CSS a: hover HARUS muncul setelah a: link dan a: visited agar efektif.</p>
<p><b>Catatan:</b> Pada definisi CSS a: active HARUS muncul setelah a: hover agar efektif.</p>
</body>
</html>
Properti backgorund-color pada CSS dapat digunakan untuk menentukan warna background sebuah link.
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">Ini adalah link</a></b></p>
<p><b>Catatan:</b> Pada definisi CSS a: hover HARUS muncul setelah a: link dan a: visited agar efektif.</p>
<p><b>Catatan:</b> Pada definisi CSS a: active HARUS muncul setelah a: hover agar efektif.</p>
</body>
</html>
Berikut ini adalah contoh yang lebih lengkap, di mana kode program dibuat dengan menggabungkan beberapa properti CSS untuk menampilkan link sebagai kotak / tombol:
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
<h2>Link Button</h2>
<p>Membuat Style sebuah sebagai tombol:</p>
<a href="default.asp" target="_blank">Ini adalah link</a>
</body>
</html>
Contoh di bawah ini menunjukkan cara menambahkan style yang berbeda ke hyperlink.
<!DOCTYPE html> <html> <body> <p>Arahkan mouse pada setiap kata dibawah ini untuk mengubah kursor.</p> <span style="cursor:auto">auto</span><br> <span style="cursor:crosshair">crosshair</span><br> <span style="cursor:default">default</span><br> <span style="cursor:e-resize">e-resize</span><br> <span style="cursor:help">help</span><br> <span style="cursor:move">move</span><br> <span style="cursor:n-resize">n-resize</span><br> <span style="cursor:ne-resize">ne-resize</span><br> <span style="cursor:nw-resize">nw-resize</span><br> <span style="cursor:pointer">pointer</span><br> <span style="cursor:progress">progress</span><br> <span style="cursor:s-resize">s-resize</span><br> <span style="cursor:se-resize">se-resize</span><br> <span style="cursor:sw-resize">sw-resize</span><br> <span style="cursor:text">text</span><br> <span style="cursor:w-resize">w-resize</span><br> <span style="cursor:wait">wait</span><br> </body> </html>
Dibawah ini adalah contoh lain cara membuat kotak / tombol pada sebuah link.
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: green;
color: white;
}
</style>
</head>
<body>
<a href="default.asp" target="_blank">Ini adalah link</a>
</body>
</html>
Properti cursor pada CSS menentukan tipe kursor yang akan ditampilkan. Contoh ini menunjukkan berbagai jenis kursor yang dapat digunakan untuk menunjukan sebuah link.
<!DOCTYPE html> <html> <body> <p>Arahkan mouse pada setiap kata dibawah ini untuk mengubah kursor.</p> <span style="cursor:auto">auto</span><br> <span style="cursor:crosshair">crosshair</span><br> <span style="cursor:default">default</span><br> <span style="cursor:e-resize">e-resize</span><br> <span style="cursor:help">help</span><br> <span style="cursor:move">move</span><br> <span style="cursor:n-resize">n-resize</span><br> <span style="cursor:ne-resize">ne-resize</span><br> <span style="cursor:nw-resize">nw-resize</span><br> <span style="cursor:pointer">pointer</span><br> <span style="cursor:progress">progress</span><br> <span style="cursor:s-resize">s-resize</span><br> <span style="cursor:se-resize">se-resize</span><br> <span style="cursor:sw-resize">sw-resize</span><br> <span style="cursor:text">text</span><br> <span style="cursor:w-resize">w-resize</span><br> <span style="cursor:wait">wait</span><br> </body> </html>
Sekian pembahasan dan contoh membuat style link yang berbeda-beda dalam CSS, semoga bermanfaat.