Mengatur hyperlink dengan CSS

Empat status tautan dan mengubahnya menjadi tombol.

Pahami konsepnya

Tautan punya empat keadaan yang masing-masing bisa didandani terpisah: a:link keadaan biasa belum dikunjungi, a:visited setelah pernah dikunjungi, a:hover saat kursor melayang di atasnya, dan a:active pada saat sedang diklik. Menata keempatnya membuat tautan terasa hidup — pengunjung mendapat umpan balik tanpa perlu JavaScript.

Perubahan paling umum: pada hover, ganti warna atau beri garis bawah; pada visited, redupkan agar pengunjung tahu sudah pernah ke sana. Urutan penulisannya disarankan link-visited-hover-active agar aturan saling menimpa dengan benar.

Trik favorit semua orang: mengubah tautan menjadi tombol. Resepnya bukan tag baru melainkan CSS pada <a> — background berwarna, padding untuk ruang gerak, text-decoration: none melepas garis bawah, dan hover yang mengganti warna. Ditambah border-radius, hasilnya tombol pill yang halus; dipasang di navbar, jadilah menu yang rapi.

Coba contoh kode

a.tombol,
a.tombol:link,
a.tombol:visited {
  display: inline-block;
  padding: 10px 22px;
  background: #1ABC9C;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
}

a.tombol:hover {
  background: #148f77;
}

a.tombol:active {
  background: #0e6251;
}

Tiga keadaan diam (link, visited, dan dasar) berbagi gaya dasar tombol; hover dan active masing-masing menggelapkan warna selangkah — urutan terang-sedang-gelap memberi rasa "ditekan". display: inline-block membuat padding tampil penuh pada elemen sebaris seperti a.

Latihan singkat

Buat tiga tautan bertema beda (netral, peringatan, sukses) sebagai tombol dengan status hover dan active yang jelas.