1. Menambahkan warna link, saat dikunjungi serta pada saat diklik
<style type="text/css">
a.satu:link {color:#FF0000;}
a.satu:visited {color:#00FF00;}
a.satu:hover {color:#FF00FF;}
a.satu:active {color:#0000FF;}
</style>
<a class="satu" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>
Maka Hasilnya
Cara Buat Web Gratisa.satu:link {color:#FF0000;}
a.satu:visited {color:#00FF00;}
a.satu:hover {color:#FF00FF;}
a.satu:active {color:#0000FF;}
</style>
<a class="satu" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>
Maka Hasilnya
2. Penggunaan text-decoration pada link
<style type="text/css">
a.dua:link {text-decoration:none;}
a.dua:visited {text-decoration:none;}
a.dua:hover {text-decoration:underline;}
a.dua:active {text-decoration:underline;}
</style>
<a class="dua" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>
a.dua:link {text-decoration:none;}
a.dua:visited {text-decoration:none;}
a.dua:hover {text-decoration:underline;}
a.dua:active {text-decoration:underline;}
</style>
<a class="dua" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>
MAKA HASILNYA
3. Menentukan warna latar belakang untuk link
<style type="text/css">
a.tiga:link {background-color:#B2FF99;}
a.tiga:visited {background-color:#FFFF85;}
a.tiga:hover {background-color:#FF704D;}
a.tiga:active {background-color:#FF704D;}
</style>
<a class="tiga" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>
MAKA HASILNYA
4. Memberikan efek lain pada link
<style type="text/css">
a.empat:link {color:#ff0000;}
a.empat:visited {color:#0000ff;}
a.empat:hover {color:#ffcc00;}
a.lima:link {color:#ff0000;}
a.lima:visited {color:#0000ff;}
a.lima:hover {font-size:150%;}
a.enam:link {color:#ff0000;}
a.enam:visited {color:#0000ff;}
a.enam:hover {background:#66ff66;}
a.tujuh:link {color:#ff0000;}
a.tujuh:visited {color:#0000ff;}
a.tujuh:hover {font-family:monospace;}
a.delapan:link {color:#ff0000;text-decoration:none;}
a.delapan:visited {color:#0000ff;text-decoration:none;}
a.delapan:hover {text-decoration:underline;}
</style>
<a class="empat" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>
<a class="lima" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>
<a class="enam" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>
<a class="tujuh" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>
<a class="delapan" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>
MAKA HASILNYA
Cara Buat Web Gratis
Cara Buat Web Gratis
Cara Buat Web Gratis
Cara Buat Web Gratis
4. Membuat kotak link berbentuk tab menu
<style type="text/css">a.sembilan:link,a.sembilan:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a.sembilan:hover,a.sembilan:active
{
background-color:#7A991A;
}
</style>
<a class="sembilan" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>
MAKA HASILNYA
Komentar