Harika CSS Buttonum 4

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.

4 thoughts on “Harika CSS Buttonum

  1. Reply Oğuzhan Aslan Kas 14,2011 02:20

    Çok hoş bir uygulama olmuş. Tebrik ediyorum.

  2. Reply windows destek Ara 11,2011 04:30

    teşekkürler admin gerçekten harika

  3. Reply Reşid Oca 19,2012 13:03

    Hocam gerçekten çok güzel olmuş. Elinize sağlık.

Leave a Reply