Dito PriwantoPada seri belajar CSS bagian 21, kita telah mempelajari CSS Icons dan bagaimana ikon dapat digunakan untuk mempercantik tampilan website.Setelah memahami elemen visual tersebut, kini saatnya beralih ke elemen interaksi yang tak kalah penting dalam sebuah halaman web, yaitu CSS links.
Dalam kode HTML, link (atau sering disebut hyperlink) adalah elemen yang memungkinkan pengguna berpindah dari satu halaman ke halaman lainnya. Link dapat mengarah ke halaman web lain, URL tertentu, maupun file atau dokumen.
Secara default, browser menampilkan link dengan gaya standar, yaitu teks berwarna biru dan bergaris bawah. Tampilan ini cenderung terlihat biasa dan kurang menarik. Dalam seri belajar CSS bagian 22 ini, kita akan belajar cara mengatur dan mempercantik tampilan link menggunakan CSS Links pada website.
Pengertian CSS Links
CSS Link (tautan) adalah teknik yang digunakan untuk mengubah tampilan elemen HTML yaitu <a> (hyperlink) agar lebih interaktif dan menarik bagi pengguna. Hal yang unik dari CSS Links adalah penggunaan Pseudo-classes, yang memungkinkan Anda memberikan gaya atau style yang berbeda berdasarkan interaksi pengguna.
Agar link dapat berfungsi dengan baik, terdapat empat urutan status yang biasanya dapat di atur, yaitu:
- a:link: Kondisi awal atau normal untuk link (element
<a>) yang belum pernah dikunjungi. - a:visited: Tampilan setelah pengguna pernah mengklik link (element
<a>) tersebut di masa lalu. - a:hover: Tampilan saat kursor mouse berada di atas link (element
<a>) . - a:active: Tampilan tepat saat link (element
<a>) sedang diklik.
Fungsi CSS Links
CSS Links digunakan untuk mengatur tampilan elemen <a> agar sesuai dengan desain website. Dengan CSS Links, Anda dapat mengubah warna teks, gaya garis (underline), hingga warna background sesuai kebutuhan tampilan yang ingin dibangun.
Tanpa menggunakan CSS Links, tampilan link akan mengikuti gaya default browser, biasanya berwarna biru dan bergaris bawah, sehingga terlihat kurang menarik. Oleh karena itu, CSS Links sangat penting untuk meningkatkan tampilan dan pengalaman pengguna pada website.
Berikut adalah beberapa fungsi dari CSS Links:
1. Memberikan efek feedback visual (Interaktivitas)
Hal ini dapat memberitahu pengguna seperti perubahan warna teks ketika di hover bahwa sebuah teks dapat di klik dan berinteraksi.
Hal ini dapat memberitahu pengguna bahwa sebuah teks dapat di klik dan dapat di custom / style sesuai dengan kebutuhan website.
3. Estetika dan Branding
Anda dapat menyesuaikan dengan desain tema website, baik itu dari segi warna, background, atau menghilangkan garis bawah agar tampilan lebih bersih dan juga dapat merubah link menjadi tombol.
4. Meningkatkan Aksesibilitas
Anda dapat mengkonfigurasi dan memberikan fokus visual bagi pengguna yang akan menggunakan tombol tab di keyboard.
Properti CSS yang Sering Digunakan
Anda dapat menggunakan hampir semua properti CSS untuk link (element <a>), namun berikut yang paling umum digunakan:
- color: Mengubah warna teks link.
- text-decoration: Digunakan untuk menghilangkan atau menambah garis bawah (none atau underline).
- background-color: Memberikan warna latar belakang agar link terlihat seperti tombol.
Berikut contoh kode penulisan CSS Links:
a {
color: blue;
background-color: red;
font-weight: bold;
}Berikut kode html yang digunakan:
<a href="https://rumahweb.com/" target="_blank">This is a link</a>Contoh Implementasi
Berikut adalah beberapa contoh sederhana untuk mengubah tampilan link dari standar default browser menjadi tombol modern yang responsif dan interaktif.
Styling Links
Anda dapat merubah style css links agar tidak seperti default, dan juga efek feedback ketika mouse di hover, berikut contoh kodenya:
<!DOCTYPE html>
<html>
<head>
<title>Contoh CSS Links</title>
<style>
a.satu:link {
color: red;
}
a.satu:hover {
color: yellow;
}
a.dua:link {
color: red;
}
a.dua:hover {
font-weight: bold;
font-size:150%;
}
a.tiga:link {
color: red;
}
a.tiga:hover {
background:lightgreen;
}
a.empat:link {
color: red;
}
a.empat:hover {
font-family:monospace;
}
a.lima:link {
color: red;
text-decoration:none;
}
a.lima:hover {
text-decoration:underline;
}
</style>
</head>
<body>
<p><a class="satu" href="https://rumahweb.com/" target="_blank">Merubah warna link ketika di hover</a></p>
<p><a class="dua" href="https://rumahweb.com/" target="_blank">Merubah ukuran link ketika di hover</a></p>
<p><a class="tiga" href="https://rumahweb.com/" target="_blank">Merubah warna background link ketika di hover</a></p>
<p><a class="empat" href="https://rumahweb.com/" target="_blank">Merubah font link ketika di hover</a></p>
<p><a class="lima" href="https://rumahweb.com/" target="_blank">Menghapus garis bawah link dan memunculkan garis bawah ketika di hover</a></p>
</body>
</html>Dan berikut hasil dari kode nya, Anda dapat melakukan hover ke link berikut:
Merubah warna link ketika di hover
Merubah ukuran link ketika di hover
Merubah warna background link ketika di hover
Merubah font link ketika di hover
Mengubah Links menjadi tombol
Anda dapat merubah style css links agar menjadi sebuah tombol yang menarik dan tidak seperti default, dan juga efek feedback ketika mouse di hover, Anda juga dapat mengkombinasikan dengan CSS Icons, Background Color, Font Size, dan property css lain sesuai dengan kebutuhan, berikut contoh kode lengkapnya :
<!DOCTYPE html>
<html>
<head>
<title>Contoh CSS Links</title>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
<style>
.a-btn a {
padding: 14px 25px;
background-color: blue;
display: inline-flex;
border-radius: 10px;
text-decoration: none;
align-items: center;
}
.a-btn a.satu:link {
color: white;
background-color: crimson;
animation: pulse 1s infinite;
-moz-animation: bounce 2s infinite;
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
.a-btn a.satu:hover {
color: yellow;
}
.a-btn a.dua:link {
color: white;
border-radius: 25px;
}
.a-btn a.dua:hover {
font-weight: bold;
font-size:150%;
border-radius: 25px;
}
.a-btn a.tiga:link {
color: blue;
background-color: white;
border: 2px solid blue;
}
.a-btn a.tiga:hover {
background:lightgreen;
}
.a-btn a.empat:link {
color: white;
background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
}
.a-btn a.empat:hover {
font-family:monospace;
}
.a-btn a.lima:link {
color: white;
background: linear-gradient(-45deg, #00ad05, #ff0bf7, #2340ab, #ff0000);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
.a-btn a.lima .material-symbols-outlined{
animation: spin 2s linear infinite;
}
.a-btn a.lima:hover {
text-decoration:underline;
}
.a-btn span.material-symbols-outlined {
margin-right: 5px;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
60% {
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
}
</style>
</head>
<body>
<div class="a-btn">
<p><a class="satu" href="https://rumahweb.com/" target="_blank">Merubah warna link ketika di hover</a></p>
<p><a class="dua" href="https://rumahweb.com/" target="_blank">Merubah ukuran link ketika di hover</a></p>
<p>
<a class="tiga" href="https://rumahweb.com/" target="_blank"><span class="material-symbols-outlined">home</span>Merubah warna background link ketika di hover</a></p>
<p>
<a class="empat" href="https://rumahweb.com/" target="_blank"><span class="material-symbols-outlined">speed</span>Merubah font link ketika di hover</a></p>
<p>
<a class="lima" href="https://rumahweb.com/" target="_blank"> <span class="material-symbols-outlined">settings</span>Menampilkan garis bawah ketika di hover</a></p>
</div>
</body>
</html>Dan berikut hasil dari kode nya, Anda dapat melakukan hover ke link berikut:
Merubah warna link ketika di hover
Merubah ukuran link ketika di hover
homeMerubah warna background link ketika di hover
Penutup
CSS Links berfungsi untuk mengubah tampilan elemen hyperlink (<a>) dari teks biru standar menjadi elemen yang lebih menarik, interaktif, dan fungsional. Dengan memanfaatkan pseudo-class seperti :hover dan :active, CSS dapat memberikan efek visual saat link disentuh atau diklik, sehingga pengguna mendapatkan respon yang jelas saat berinteraksi.
Selain itu, CSS Links memungkinkan Anda menyesuaikan desain link agar selaras dengan tema website, baik dalam bentuk teks sederhana maupun tombol yang lebih dinamis dan modern.
Demikian artikel kami tentang belajar CSS bagian 22 tentang CSS Links. Ikuti terus kelas belajar CSS selanjutnya di Rumahweb Indonesia, agar kemampuan CSS Anda semakin meningkat. Selamat belajar.
