Belajar CSS Part 10 - Tautan (Link)

Assalamu'alaikum warohmatullaahi wabarokaatuh.

Belajar CSS kali ini akan menjelaskan tentang bagaimana kita bisa mengatur style dari sebuah link /tautan. Seperti yang pernah kita bahas pada Belajar HTML Part 11 - Tautan (Link) dan Belajar HTML Part 2 - Dasar Heading, Paragraf, Link, dan Gambar, bahwa tautan atau link berfungsi untuk menghubungkan sebuah halaman dengan halaman lain.

Dalam CSS kita bisa mengatur warna teks, decoration, background, dan berbagai pengaturan lain dari sebuah link sesuai keinginan kita. Ada empat kondisi dari sebuah link yang bisa kita atur tampilannya. Yaitu :

• a:link - Link dalam keadaan awal, belum dikunjungi atau diklik.
• a:visited - Link yang sudah dikunjungi
• a:hover - Kondisi link ketika mouse berada di atasnya, namun tidak diklik
• a:active - Kondisi link ketika sedang diklik.

Contoh script CSS untuk penggunaan link adalah :

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

Penjelasan :

• Dengan CSS di atas, link biasa dan link yang telah dikunjungi tidak akan diberi garis bawah, sedangkan link akan diberi garis bawah ketika mouse kita berada di atas link tersebut dan ketika link tersebut kita klik.

MEMBUAT BUTTON DENGAN MENGGUNAKAN LINK

Link seringkali ditampilkan dengan pengaturan CSS sedemikian rupa sehingga ditampilkan seperti sebuah button. Berikut contohnya :

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

Dengan menggunakan script CSS di atas, link akan ditampilkan dengan tampilan seperti sebuah button.

Coba sendiri di sini

Demikian Belajar CSS tentang link, semoga bermanfaat.

Terima kasih dan wassalamu'alaikum warohmatullaahi wabarokaatuh.