Html sayfalarında link etiketlerimiz yani <a> ya da <button> etiketleri için kullanacağımız color, background-color, font-family, text-decoration, padding vb. css özellikleriyle çok güzel css linkleri ve butonları oluşturabiliriz.
En basitiyle bir <a> etiketi için bir css kodunu aşağıdaki gibi uygulayabiliriz.
a {
text-decoration:none;
color:red;
}
Örnek 1 için tıklayınız.
Örneğimizde, link için yazı rengini kırmızı ve tarayıcı varsayılanı olan text-decoration:underline; özelliğini yani alt çizgi özelliğini kaldırmak için text-decoration:none; css kodunu ekliyoruz.
Örneğimizi biraz daha geliştirip daha güzel görüntüler elde edebiliriz.
a {
background-color: #f44336;
color: #fff;
padding: 14px 25px;
text-decoration: none;
font-size: 16px;
}
Örnek 2 için tıklayınız.
Örneğimizde;
** <a> etiketi için bir arkaplan rengi veriyoruz. (#f44336)
** Kırmızı zemin rengi üzerinde beyaz yazı için #fff renk kodunu kullanıyoruz.
** Her nesnenin etrafında bir kutu olduğunu css box model dersinde söylemiştik. Bu kutu ile yazı arasındaki mesafeyi ayarlamak için üst ve alttan 14px ' lik bir padding değeri ve aynı şekilde sağ ve soldan 25px' lik bir padding değeri ile boşluk bırakıyoruz.
** text-decoration:none; diyerek link yazısı altındaki altçizgiyi kaldırıyoruz.
** font büyüklüğü olarak 16px' lik bir değer veriyoruz.
Peki link üzerine geldiğimizde ya da linke tıkadığımızda bir efekti nasıl oluşturuyoruz ?
Linklere efekt eklemek için pseudo class özelliklerini kullanmalıyız. Bu konuyu daha Css Selectors dersimizde görmüştük.
/* 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;
}
Örnek 3 için tıklayınız.
Yukarıdaki örneğimizde <a> etiketi için farklı durumlar gösterilmiştir. Buradaki durumları iyi öğrenmemiz gerekiyor.
a:link => ziyaret edilmemiş link için eklenecek css kodları :link pseudo class' ı ile eklenir.
a:visited => ziyaret edilmiş link için eklenecek css kodları a:visited pseudo class' ı ile eklenir.
a:hover => link üzerine geldiğimiz anda eklenecek css kodları a:hover pseudo class' ı ile eklenir.
a:active => linke tıkladığımız anda eklenecek css kodları a:active pseudo class' ı ile eklenir.
a:link, a:visited {
background-color: #f44336;
color: #fff;
padding: 14px 25px;
text-decoration: none;
font-size: 16px;
opacity: 0.9;
}
a:hover, a:active {
opacity: 1;
}
Örnek 4 için tıklayınız.
** 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.
Örneğimizde a:link ve a:visited pseudo class' lari ile iki durumu birleştirdik yani linkin ziyaret edilmemiş ve edilmiş halini grupladık ve aynı css kodlarını ekledik.
Daha sonra a:hover ve a:active pseudo class 'ları ile gene iki durumu gruplayıp opacity özelliğini 1 ' e getirdik. Yani kullanıcı link üzerine mouse ile geldiğinde ya da linke tıkladığında tek değişen css özelliği opacity' nin 0.9 dan 1 'e gelmesidir. Dolayısıyla burada soluk bir zemin renginden rengin orjinaline bir geçiş efekti eklemiş oluyoruz.