Link CSS

Style Link

Link dapat di-style dengan properti CSS apa pun (mis. color, font-family, background, dll.).

Contoh

a {
  color: blue;
}

Selain itu, link dapat di-style secara berbeda tergantung pada statusnya.

Empat status link adalah:

• a:link - link normal yang belum dikunjungi
• a:visited - link yang telah dikunjungi pengguna
• a:hover - link saat pengguna mengarahkan mouse ke atasnya
• a:active - link saat diklik

Contoh

/* link yang belum dikunjungi */
a:link {
  color: red;
}

/* link yang sudah dikunjungi */
a:visited {
  color: green;
}

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

/* link saat diklik */
a:active {
  color: blue;
}

Saat mengatur style untuk beberapa status link, ada beberapa aturan urutan:

• a:hover harus muncul setelah a:link dan a:visited
• a:active harus datang setelah a:hover

Dekorasi Teks

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

Contoh

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

Warna Background

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;
}

Link Button (Tombol Link)

Contoh dibawah ini menunjukkan menggabungkan beberapa properti CSS untuk menampilkan link sebagai button/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;
}

Contoh

Contoh ini menunjukkan cara menambahkan style lain ke hyperlink:

a.one:link {color: #ff0000;}
a.one:visited {color: #0000ff;}
a.one:hover {color: #ffcc00;}

a.two:link {color: #ff0000;}
a.two:visited {color: #0000ff;}
a.two:hover {font-size: 150%;}

a.three:link {color: #ff0000;}
a.three:visited {color: #0000ff;}
a.three:hover {background: #66ff66;}

a.four:link {color: #ff0000;}
a.four:visited {color: #0000ff;}
a.four:hover {font-family: monospace;}

a.five:link {color: #ff0000; text-decoration: none;}
a.five:visited {color: #0000ff; text-decoration: none;}
a.five:hover {text-decoration: underline;}

Sumber referensi: w3schools