Memberikan style link pseudo-classes pada CSS

Style link

Pada CSS Anda bisa mengatur style untuk link agar menjadi lebih interaktif. Salah satunya menggunakan anchor pseudo-classes. Sebuah link memiliki empat state yang berbeda, yaitu: link, visited, active dan hover. Keempat state ini dapat ditata secara berbeda melalui properti CSS atau dengan anchor pseudo-classes yang bisa Anda gunakan untuk menentukan gaya elemen <a> .

• a: link – Normal, link yang belum dikunjungi
• a: visited – Link pengguna yang telah dikunjungi
• a: hover – Link ketika mouse pengguna di atasnya
• a: active – Link saat itu diklik

a:link {
    color: red;
}
a:visited {
    color: green;
}
a:hover {
    color: blue;
}
a:active {
    color: orange;
}

Arahkan kursor mouse diatas link dan coba klik link tersebut agar Anda bisa melihat perubahannya.

Style link standar

Di semua browser web utama, tautan pada halaman web memiliki garis bawah dan menggunakan warna tautan default browser, jika Anda tidak menetapkan gaya khusus untuk mereka. Misalnya, warna tautan default di peramban web berbasis Gecko seperti Firefox adalah biru untuk belum dikunjungi, ungu untuk dikunjungi dan merah untuk tautan aktif.

Style link dengan tombol

Anda juga bisa memainkan hyperlink dengan style seperti tombol. Ini mendesain sebuah CSS untuk menampilkan link sebagai visual kotak atau tombol, yang tentunya bisa diklik.

a:link, a:visited {
    background-color: orange;
    padding: 15px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
a:hover, a:active {
    background-color: red;
}

Style link dengan text decoration

Anda juga bisa memainkan hyperlink dengan mengkombinasikan pada properti text-decoration.

a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
a:active {
    text-decoration: underline;
}

Daftar anchor pseudo-classes