CSS Links

CSS memungkinkan Anda untuk mengubah gaya tautan (link) berdasarkan statusnya. Ada empat status link yang umum:

• a:link – link normal yang belum dikunjungi.
• a:visited – link yang sudah dikunjungi.
• a:hover – saat mouse diarahkan ke link.
• a:active – saat link diklik.

1. Gaya Dasar Link

Contoh mengatur warna dan efek hover pada link.

a:link {
  color: blue;
  text-decoration: none;
}
 
a:visited {
  color: purple;
}
 
a:hover {
  color: red;
  text-decoration: underline;
}
 
a:active {
  color: orange;
}

2. Link sebagai Tombol

Anda juga bisa membuat link terlihat seperti tombol.

<a href="#" class="btn-link">Klik Saya</a>

.btn-link {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
}
 
.btn-link:hover {
  background-color: #45a049;
}

3. Link dalam Navigasi

Biasanya link digunakan dalam elemen navigasi (navbar). Anda bisa menata link agar lebih menarik untuk tampilan menu.

<nav>
  <a href="#">Beranda</a>
  <a href="#">Tentang</a>
  <a href="#">Kontak</a>
</nav>

nav a {
  margin-right: 20px;
  text-decoration: none;
  color: #333;
}
 
nav a:hover {
  color: #007bff;
}

Dengan menggunakan pseudo-class seperti :hover, :active, dan :visited, Anda dapat memberikan pengalaman pengguna yang lebih interaktif dan visual yang menarik pada halaman web Anda.