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

İtekleyince 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>

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-06-29 tarihinde yayınlandı,Toplam 1542 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...