CSS buttonlara fade hover efekti

Site üzerinde de farketmiştirsinizdir. Örnek görmek isteyen arkadaşlar header'ın sağ tarafında yazan e-posta adresinin üzerine gelerek örneğe bakabilirler. Normal hover değerinin aksine daha hoş bir hava kattığı görüşündeyim. Bu efekti hem button, hem de a href linklerinizde kullanabilirsiniz.

button veya a href, hangisine eklemek istiyorsanız css değerinin içerisine eklemeniz gereken kod aşağıda.

 -o-transition: 0.4s;
 -ms-transition: 0.4s;
 -moz-transition: 0.4s;
 -webkit-transition: 0.4s;
 transition: 0.4s;

Örneklemek gerekirse benim .eposta değeri için css dosyası içerisinde kullandığım kod

.eposta{
    float: right;
    background: #383838;
    color: white;
    line-height: 40px;
    height: 40px;
    margin-top: 5px;
    font-size: 20px;
    margin-right: 50px;
    padding-right: 10px;
    padding-left: 10px;
    text-decoration: none;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
    -moz-transition: 0.4s;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    cursor: default;
}

Hover değerinde pek değişen bir şey yok, sadece background değeri vermeniz yeterli. Değinmemiz gereken başka bir şey, geçiş saniyesini ayarlamak; transition değerinin sonunda bulunan 0.4s değerini arttırarak geçiş hızını yavaşlatabilir ya da tam tersi değeri düşürerek geçiş hızını arttırabilirsiniz.