Cara Mengatur Tampilan Link dengan CSS

Link atau hyperlink merupakan salah satu elemen yang paling sering dijumpai pada halaman website.

Link dalam bahasa Indonesia disebut juga sebagai tautan.

Fungsi dari link ini digunakan untuk menghubungkan antara halaman website yang satu dengan halaman lainnya dengan mudah.

Cukup dengan mengklik link tersebut maka halaman baru akan terbuka.

Untuk membuat link kamu bisa mengikuti tutorial cara membuat link.

Cara Memberi Style Link

Agar tampilan link lebih menarik, kamu bisa menambahkan style dengan menggunakan properti CSS seperti: color, font-family, background, dll.

Selain itu, link dapat diatur secara berbeda tergantung pada keadaannya.

Ada 4 keadaan yang bisa digunakan untuk mengatur tampilan link, yaitu:

• a:link - keadaan link normal
• a:visited - keadaan link yang sudah pernah dikunjungi oleh pengguna
• a:hover - keadaan link saat pengguna mengarahkan cursor mouse diatasnya
• a:active - keadaan link saat diklik oleh pengguna

Cara Mengatur Warna pada Link

Untuk menentukan warna link, kamu bisa menggunakan property CSS color.

Warna yang diterapkan pada link juga diterapkan pada dekorasi link yang menggunakan properti text-decoration, seperti underlines, upperlines, line-throughs, dll.

Warna link dapat ditentukan menggunakan nilai color apa pun, seperti semi-transparan atau bahkan sepenuhnya transparan.

Namun, warna tidak dapat berupa gradien karena gradient adalah nilai dari image, dan bukan nilai warna.

a {
    color: green;
}

<p><b><a href="/css/" target="_blank">Ini teks link</a></b></p>
<p><b>Catatan:</b> a:hover harus diletakkan setelah a:link dan a:visited dalam definisi CSS agar bisa efektif.</p>
<p><b>Catatan:</b> a:active harus diletakkan setelah a:hover dalam definisi CSS agar bisa efektif.</p>

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

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

/* saat cursor mouse di atas link */
a:hover {
  color: hotpink;
}

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

Baca juga penjelasan lebih detail tentang referensi properti color

Mengatur Text Decoration Link

Secara default, teks link memiliki efek garis bawah seperti ini: ini teks link

Untuk menghilangkan efek garis bawah, kamu bisa menggunakan properti CSS text-decoration: none.

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

Baca juga penjelasan lebih detail tentang referensi properti text decoration

Cara Memberi Background pada Link

Untuk memberi background pada link, kamu bisa menggunakan properti css background-color.

<p><b><a href="/css/" target="_blank">Ini teks link</a></b></p>
<p><b>Catatan:</b> a:hover harus diletakkan setelah a:link dan a:visited dalam definisi CSS agar bisa efektif.</p>
<p><b>Catatan:</b> a:active harus diletakkan setelah a:hover dalam definisi CSS agar bisa efektif.</p>

a:link {
  background-color: yellow;
}

a:visited {
  background-color: cyan;
}

a:hover {
  background-color: lightgreen;
}

a:active {
  background-color: hotpink;
} 

Baca juga penjelasan lebih detail tentang referensi properti background color

Cara Membuat Tombol atau Button Link

Link sering juga digunakan untuk membuat tombol pada halaman website.

Efek tombol ini dibuat dengan kombinasi beberapa properti CSS seperti berikut.

.btn:link,
.btn:visited {
  background-color: #00a396;
  color: white;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 8px;
}

.btn:hover,
.btn:active {
  background-color: #00ad9f;
} 

<h2>Tombol Link</h2>
<p>Contoh link dengan style button:</p>

<a class="btn" href="/css/" target="_blank">Daftar Sekarang</a>

.btn:link,
.btn:visited {
  background-color: #00a396;
  color: white;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 8px;
}

.btn:hover,
.btn:active {
  background-color: #00ad9f;
}