CSS buttonlara fade hover efekti

Bir butonun ya da linkin üzerine gelindiğinde renginin bir anda değil, yumuşakça değişmesini sağlayan fade (geçiş) efektini anlatacağım. Normal hover'a göre çok daha hoş bir hava katıyor. Bu efekti hem button hem de a href linklerinde kullanabilirsiniz.

İşin tamamı tek bir CSS satırında: elemanın normal haline transition eklemek. Bu satır tarayıcıya "bu elemanın değerleri değişirken bir anda değil, şu sürede yumuşakça değişsin" der.

transition: 0.4s;

Örnek olarak bir .eposta linki için kullandığım kod şöyle:

.eposta {
    background: #383838;
    color: #fff;
    padding: 0 10px;
    line-height: 40px;
    font-size: 20px;
    text-decoration: none;
    border-radius: 6px;
    transition: 0.4s;   /* geçiş efekti */
}

.eposta:hover {
    background: #c0392b;
}

Gördüğünüz gibi hover kısmında tek yaptığımız şey yeni bir background rengi vermek. transition satırı sayesinde bu renk değişimi anında değil, 0.4 saniyede yumuşakça gerçekleşiyor. Sadece arka planı değil, yazı rengini, kenarlığı, boyutu da aynı şekilde yumuşak geçişle değiştirebilirsiniz; transition hepsini birden halleder.

Geçişin hızını sondaki 0.4s değeriyle ayarlarsınız: değeri büyütürseniz geçiş yavaşlar, küçültürseniz hızlanır. Örneğin 0.2s daha çevik, 0.8s daha ağır bir his verir.

Küçük bir ipucu: Sadece belirli bir özelliğin geçişli olmasını istiyorsanız, hangisi olduğunu yazabilirsiniz. Örneğin transition: background 0.4s; yalnızca arka plan rengini yumuşak geçirir, diğer değişiklikler anında olur. Her şeyin geçişli olmasını isterseniz yukarıdaki gibi sade transition: 0.4s; yeterli.