Warna Link di HTML: Contoh Sintak dan Cara Membuatnya

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti October 1, 2020

Link HTML ditampilkan dalam warna yang berbeda tergantung pada apakah telah dikunjungi, belum dikunjungi, atau aktif.

Warna Link di HTML

Secara default, link akan muncul seperti ini (di semua browser):

Link yang belum dikunjungi digarisbawahi dan berwarna biru
Link yang dikunjungi digarisbawahi dan berwarna ungu
Link aktif digarisbawahi dan berwarna merah

Kita bisa mengubah status warna tautan link dengan menggunakan CSS

Contoh :

Di sini, tautan yang belum dikunjungi akan berwarna hijau tanpa garis bawah. Tautan yang dikunjungi akan berwarna merah muda tanpa garis bawah. Tautan aktif akan berwarna kuning dan digarisbawahi. Selain itu, saat mengarahkan mouse ke atas tautan (a: hover) itu akan menjadi merah dan digarisbawahi:

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>
</head>
<body>

<h2>Link Colors</h2>

<p>You can change the default colors of links</p>

<a href="html_images.asp" target="_blank">HTML Images</a> 

</body>
</html>

Link Tombol

Link juga dapat diberi gaya sebagai tombol, dengan menggunakan CSS:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 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>Style link button:</p>
<a href="default.asp" target="_blank">Link</a>

</body>
</html>