Html de link kullanımını iki şekilde görebilirsiniz. <a> veya <button> etiketleri sayesinde kolaylıkla link oluşturulabilir. Color, background-color, font-family, text-decoration, padding gibi özellikler eklenerek linklerimizi daha güzel bir hale getirebiliriz.
a etiketiyle link oluşturma
<a href="#">Anasayfa</a>
<a href="#">Hakkımızda</a>
<a href="#">İletişim</a>
a {
text-decoration: none;
color: green;
}

Yukarıdaki örneğimizi biraz daha css ile özelleştirirsek daha güzel bir görüntü elde edebiliriz.
a {
text-decoration: none;
color: green;
font-size: 20px;
background-color: deeppink;
padding: 15px 15px;
display: inline-block;
margin-top: 10px;
}

Link görünümü, tıklandığında, üzerine geldiğimizde, ziyaret edildiğinedeki özellikler aşağıdaki gibidir.
/* ziyaret edilmemiş link için eklenecek css kodları */
a:link {
color: red;
}
/* ziyaret edilmiş link için eklenecek css kodları */
a:visited {
color: green;
}
/* link üzerine geldiğimiz anda eklenecek css kodları */
a:hover {
color: hotpink;
}
/* linke tıkladığımız anda eklenecek css kodları */
a:active {
color: blue;
}
Aşağıda olduğu gibi bir kullanım yapılabilir.
a:link, a:visited {
text-decoration: none;
color: green;
font-size: 20px;
background-color: deeppink;
padding: 15px 15px;
display: inline-block;
margin-top: 10px;
opacity: 0.9;
}
a:hover, a:active {
opacity: 1;
}
** Css Opacity özelliği saydamlık ile alakalı bir özelliktir. Yani 1 olduğundan tamamen orjinal görüntü, 0 olduğunda ise tamamen sayfam bir görüntü elde ederiz. Eğer 0.5 ‘e getirirsek %50 sayfam bir görüntüye sahip oluruz.