İtekleyince içeri batan 3B buton tasarımı

Simon Picos tarafından sadece Css3 kullanılarak hazırlanmış bir buton örneği. Butonun benzerlerinden farkı biraz daha gerçekçi görünüyor olması. Butonu tıkladığınızda buton içeriye batıyor ve mouseyi geri çektiğinizde tekrar eski haline dönüyor. Bu tip butonun bir çok benzeri var ama butonu asıl farklı kılan ise gölgesi. Butonla beraber gölge alanıda küçüldüğü için ortaya gerekçi bir görünüm çıkıyor.

Download

Demo

Kullanım

Head etiketleri arasına eklemeniz gereken bölüm.

Google font :

<link href='https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' rel='stylesheet' type='text/css'>

Css

body { background-image: url(ricepaper.png) }

a {
	position: relative;
    color: rgba(255,255,255,1);
    text-decoration: none;
    background-color: rgba(219,87,5,1);
    font-family: 'Yanone Kaffeesatz';
    font-weight: 700;
    font-size: 3em;
    display: block;
    padding: 4px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
    -moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
    box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
    margin: 100px auto;
	width: 160px;
	text-align: center;

	-webkit-transition: all .1s ease;
	-moz-transition: all .1s ease;
	-ms-transition: all .1s ease;
	-o-transition: all .1s ease;
	transition: all .1s ease;
}

a:active {
    -webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
    -moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
    box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
    position: relative;
    top: 6px;
}

Bodt etiketleri arasına eklemeniz gereken bölüm.

Html :

<a href="javascript:void(0);">Push me!</a>