CSS 3D Görünümlü Buton
Geri Dön

CSS 3D Görünümlü Buton

Anasayfa
Gördüğüm bir fake 3d buton örneğini kendim yaptım paylaşmak istedim.Mantığı basit aslında.Css ile 3d görünümü için altına biraz border çok azda sağa border ve etrafına gölge.Mouse ile üzerine gelincede bunların boyutlarını azaltıyoruz ve içindeki yazıyı az alta indiriyoruz.

Kodlar :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>cArleone</title>
<style type="text/css">
.buton{width:100px;height:100px;padding:15px;background:#ff0357;border-radius:50px;-webkit-border-radius:50px; -moz-border-radius:50px; -o-border-radius:50px;border:2px solid #d4084c; border-bottom:8px solid #d4084c;border-right:3px solid #d4084c;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;box-shadow:0px 0px 15px #333; cursor:pointer;transition:border-bottom .5s ,border-right .5s ,box-shadow .5s;-webkit-transition:border-bottom .5s ,border-right .5s ,box-shadow .5s;-moz-transition:border-bottom .5s ,border-right .5s ,box-shadow .5s;-o-transition:border-bottom .5s ,border-right .5s ,box-shadow .5s; }
.buton:hover{border-bottom:4px solid #d4084c;border-right:2px solid #d4084c;box-shadow:0px 0px 5px #333}
.buton div{color:#fff;font-family:Tahoma;transition:padding-top .5s;-webkit-transition:padding-top .5s;-moz-transition:padding-top .5s;-o-transition:padding-top .5s; }
.buton:hover div{padding-top:3px;}
</style>
</head>
<body>

<div class="buton">
<div>Anasayfa</div>
</div>

</body>
</html>


Normak Görüntüsü :
http://ustaderslik.com/resim/ders/s5pvx.png

Mouse Üzerindeyken ki Görüntüsü :
http://ustaderslik.com/resim/ders/s5pwx.png

Burda mouse ile üzerine gelinde animasyonlu bir biçimde içine göçüyo.

İndir: http://ustaderslik.com/dosya/3d-buton.rar



Anasayfa

Tüm Hakları Saklıdır. ©Arleone 2013-UstaDerslik