Yanıp sönen 3B buton tasarımı

11Okunma
1 Yorum

Yanıp

Resim kullanılmadan sadece Css3 ile hazırlanmış bir buton örneği. Mouse ile bastığınızda içeri doğru batıyor  ve geri çektiğinizde eski haline geri geliyor. Bu işlem esnasında  gölgeside butonun içeri batmasıyla beraber küçülüyor. Bu  özelik  butona  daha  gerçekçi bir görünüm kazandırmış. Birde buton yazısının  hafif  gri  renkten oluşturulmuş ve mouseyi butonun üzerine  getirip beklediğinizde buton üzerindeki  yazı parlamaya başlıyor.

Css : 

button
{
	display: block;
	font-size: 1.1em;
	font-weight: bold;
	text-transform: uppercase;
	padding: 10px 15px;
	margin: 20px auto;
	color: #ccc;
	background-color: #555;
	background: -webkit-linear-gradient(#888, #555);
	background: linear-gradient(#888, #555);
	border: 0 none;
	border-radius: 3px;
	text-shadow: 0 -1px 0 #000;
	box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6);
	cursor: pointer;
	-webkit-transition: all 150ms ease;
	transition: all 150ms ease;
}
button a {
text-decoration:none;
color:#CCCCCC;
}
button:hover, button:focus
{
	-webkit-animation: pulsate 1.2s linear infinite;
	animation: pulsate 1.2s linear infinite;
}

@-webkit-keyframes pulsate
{
	0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
	50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
	100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}

@keyframes pulsate
{
	0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
	50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
	100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}

button:active
{
	color: #fff;
	text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff;
	box-shadow: 0 1px 0 #666, 0 2px 0 #444, 0 2px 2px rgba(0,0,0,0.9);
	-webkit-transform: translateY(3px);
	transform: translateY(3px);
	-webkit-animation: none;
	animation: none;
}

 Html : 

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

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-06-30 tarihinde yayınlandı,Toplam 1568 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(1 Yorum)
Yükleniyor...
serdar Yorumcu LV.1
2017-01-09 23:13:03 回 Yanıtla

Elinize sağlık. Teşekkürler.