Postingan saya kali ini tentang Link pada CSS. Langsung saja.
A. Styling Links
Untuk mempercantik link, dapat digunakan properti CSS, seperti color, font-family, background-color, dll.
Untuk menambah warna pada link, dapat menggunakan contoh seperti dibawah ini.
<!DOCTYPE html>
<html>
<head>
<style>
a {
color: blue;
}
</style>
</head>
<body>
<p><b><a href="" target="">Link</a></b></p>
</body>
</html>
a:link - Normal, link yang belum dikunjungi
a:visited - Link yang telah dikunjungi
a:hover - Link ketika mouse berada di atasnya
a:active - Link saat diklik
B. Text Decoration
Text decoration dalam link biasanya digunakan untuk menghilangkan garis bawah pada link.
a:link {Dari script diatas, text-decoration: none; digunakan untuk menghilangkan garis bawah di link. Sedangkan text-decoration: underline; untuk memberi garis bawah pada link.
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
C. Background Color
Digunakan untuk memberi background pada link.
a:link {
background-color: blue;
}
a:visited {
background-color: blue;
}
a:hover {
background-color: blue;
}
a:active {
background-color: blue;
}
D. Advanced - Link Buttons
Kita menggunakan beberapa properti CSS untuk membuat link seperti kotak atau tombol.
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: #000;
color: white;
padding: 15px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
</head>
<body>
<a href="" target="">Link</a>
</body>
</html>
Sekian, postingan saya kali ini tentang link dengan CSS. Terimakasih, semoga bermanfaat.
wassalamualaikum wr. wb.
Referensi :
- http://www.w3schools.com/css/css_link.asp
Tidak ada komentar:
Posting Komentar