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.

Hasan Huseyin İŞLER hakkında

Lise yıllarında programlama ile tanışan ve Q-Basic, Pascal, C başlangıç seviyesinde öğrenenir. Üniversite de TEF-BSÖ okurken diğer dillerin yanı sıra PHP'de kendini geliştirmeye devam ederek bunların yanında CSS, JS ve Wordpress sistemiyle ilgilenir. www.phpsorunu.com'un da yöneticisi ve yazarlarındandır.
Bu yazı CSS kategorisine gönderilmiş. Kalıcı bağlantıyı yer imlerinize ekleyin.

Harika CSS Buttonum için 4 cevap

  1. Oğuzhan Aslan der ki:

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

  2. windows destek der ki:

    teşekkürler admin gerçekten harika

  3. Reşid der ki:

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

Bir Cevap Yazın

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

Şu HTML etiketlerini ve özelliklerini kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>