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

Udemy'e Git

Demo

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

cArleone

BEĞEN(1)

BEĞENME(0)

GÖRÜNTÜLENME(5606)

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