Merhaba bazı sitelerde görmüş olduğum butonlar ilgimi çekti ben nasıl yaparım diye biraz düşündükten sonra hemen işe koyuldum ve bir örnek yaptım kendime.  Ortaya bence güzel bir örnek çıktı geliştirilirse web sitelerine çok güzel görsellikler katmaya devam edebilir. Şu an için ben tek renk yaptım. Sizler geliştirerek daha çok renk katabilirsiniz. Butonu hiç bir resim kullanmadan sadece CSS kullanarak yaptım ve Google Chrome tarayıcısında denedim. Ortaya sol resimdeki gibi bir görüntü çıktı. Buton normalde gri üzerine geldiğinde siyah tona yakın bir renk alır.

Butonun normal butonlardan farklı özelliği ise üzerine gelince yavaş yavaş renk değiştirip siyah tona ulaşması, üzerinden çıkıldığında ise yavaş yavaş renk değiştirerek eski rengine tekrar dönmesidir. Butonun nasıl çalıştığını görmek istiyorsanız hemen aşağıya bakmanız yeterli olacaktır.

Uygulamanın kodları ise aşağıdaki gibidir.

CSS ile renk değişimi uygulamasını yapacağız. Bu uygulamamızda farklı olan yapı ise istediğimiz bir zaman aralığında rengin bir renkten diğer renge geçişini kullanıcının görmesidir. Bu uygulamayı ben sizlere bir link üzerinde nasıl yapıldığını göstereceğim.

a{
	text-decoration:none;
        color:#f00;
}

Linkimin alt çizgisini kaldırdım. Linkimin renginide kırmızı olarak ayarladım.

a:hover {
   color:#00f;
   -webkit-transition:color 500ms ease-in;
   -moz-transition:color 500ms ease-in;
   -o-transition:color 500ms ease-in;
   transition:color 500ms ease-in;
}

Hover olayına ise üzerine gelince 500 milisaniye sonra rengimizin mavi olacağını belirttim. Sizlerde bu süreyi 500ms kısmını değiştirerek sitelerinizde kullanabilirsiniz (1000ms=1s).Uygulamamızda işi yapan kod -webkit-transition kodudur.