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

By

itekle
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.

 

Kullanım

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

Google font : 

<link href='http://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>

 



Leave a Comment

Your email address will not be published.

You may also like

Trend