Seris Mahir CSS #6: Hyperlink atau Link CSS

Hai, gimana kabarnya hari ini? Semoga kamu tetap semangat, ya! Kali ini kita bakal bahas sesuatu yang sering banget muncul di website: hyperlink alias link. Kalau kamu pernah klik teks biru yang bisa membuka halaman baru, nah, itu dia hyperlink. Tapi, ternyata nggak cuma teks biru standar, loh. Dengan CSS, kamu bisa bikin link yang jauh lebih menarik. Yuk, kita kupas tuntas!

Apa Itu Hyperlink?

Hyperlink adalah elemen HTML yang menghubungkan satu halaman ke halaman lain, baik di website yang sama atau berbeda. Biasanya, hyperlink dibuat dengan tag seperti ini:

Kunjungi Code80vity

Bagaimana CSS Bisa Mengubah Tampilan Link?

Secara default, hyperlink biasanya biru dan bergaris bawah. Tapi, dengan CSS, kamu bisa mengubah warnanya, menghilangkan garis bawah, atau bahkan menambahkan animasi! Properti CSS ini sering digunakan untuk mengatur tampilan link:

1. color: Mengubah warna teks link.
2. text-decoration: Mengatur garis bawah pada teks (hilangin atau tambahin).
3. font-style: Menambahkan gaya seperti italic.
4. hover: Mengatur efek saat kursor mouse berada di atas link.

Contoh Dasar Styling Link

Ini contoh sederhana:

a {
    color: #3498db; /* Warna biru */
    text-decoration: none; /* Hilangkan garis bawah */
}

a:hover {
    color: #2ecc71; /* Hijau saat di-hover */
    text-decoration: underline; /* Tambahkan garis bawah */
}

HTML

Kunjungi Code80vity

Pseudo-class untuk Link

CSS menyediakan pseudo-class yang memungkinkan kamu mengatur tampilan link di berbagai keadaan:

• :link – Link yang belum pernah dikunjungi.
• :visited – Link yang sudah dikunjungi.
• :hover – Saat kursor mouse berada di atas link.
• :active – Saat link sedang diklik.

Contoh:

a:link {
    color: blue; /* Link default */
}

a:visited {
    color: purple; /* Link yang sudah dikunjungi */
}

a:hover {
    color: green; /* Link saat di-hover */
    text-decoration: underline;
}

a:active {
    color: red; /* Link saat diklik */
}

Tambahkan Efek Animasi

Kalau mau link-nya lebih hidup, kamu bisa tambahkan animasi sederhana.

Contoh Animasi Hover:

a {
    color: #3498db;
    text-decoration: none;
    transition: color 0.3s ease; /* Tambahkan efek transisi */
}

a:hover {
    color: #e74c3c; /* Berubah jadi merah */
}

Atau, kalau mau lebih keren, tambahkan efek garis bawah yang muncul pelan-pelan:

a {
    color: #2c3e50;
    text-decoration: none;
    position: relative;
}

a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background: #3498db;
    bottom: -2px;
    left: 0;
    transition: width 0.3s ease;
}

a:hover::after {
    width: 100%;
}

HTML

Animasi Link Keren

a {
    display: inline-block;
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

a:hover {
    background-color: #2980b9; /* Warna tombol berubah saat di-hover */
}

HTML :

Kunjungi Sekarang

Tips Styling Link

1. Hindari menggunakan terlalu banyak warna mencolok pada link, biar nggak bikin mata capek.
2. Pastikan link yang penting mudah terlihat, jadi pengguna nggak kebingungan.
3. Jangan lupa tambahkan efek hover untuk memberi feedback ke pengguna.

Sekianlah belajar CSS tentang hyperlink dan link. Dengan styling yang tepat, kamu bisa bikin link terlihat lebih menarik dan profesional. Artikel ini sangat berguna sebelum kamu melanjutkan ke tutorial CSS selanjutnya di www.code80vity.com. Sampai jumpa di pembahasan berikutnya, dan tetap semangat belajar! ?