CSS 3D Görünümlü Buton
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

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

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(2008)
RAPOR ET
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



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol