Harika CSS Buttonum

butonMerhaba 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.

.bt1 a{
float:left;margin:40px;font-family:Helvetica, sans-serif;font-size:12px;font-weight:bold;
text-decoration:none;border-radius:3px;padding:5px 10px 5px 10px;
border:1px solid #cacaca;
background:#f6f6f6;
background: -moz-linear-gradient(top, #f6f6f6, #dcdcdc);
background: -webkit-gradient(linear,left top, left bottom, from(#f6f6f6), to(#dcdcdc));
text-shadow:1px 1px 0 #f9f9f9;
box-shadow:#dcdcdc 0px 0px 6px;
color:#717171;
-webkit-transition: 500ms linear;
-moz-transition: 500ms linear;
-o-transition: 500ms linear;
transition: 500ms linear;
}
.bt1 a:hover{
text-decoration:none;padding:5px 10px 5px 10px;border-radius:3px;
border:1px solid #585858;
background:#6c6c6c;
background: -moz-linear-gradient(top, #6c6c6c, #515151);
background: -webkit-gradient(linear,left top, left bottom, from(#6c6c6c), to(#515151));
text-shadow:1px 1px 0 #414141;
box-shadow:#dcdcdc 0px 0px 6px;
color:#fff;-webkit-transition: 500ms linear;
-moz-transition:500ms linear;
-o-transition:500ms linear;
transition:500ms linear;
}
<div class="bt1"><a href="#">Button</a></div>

Şimdiden hayırlı kullanımlar.

KategorilerCSS

“Harika CSS Buttonum” için 4 cevap

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir