Beatiful animated buttons

Beatiful

Web sitenizde kullanabileceğiniz animasyonlu buton örneği.   Sazzad Hossain tarafından hazırlanmış bu  buton örnekleri  mouse  üzerine geldiğinde  başlıklar görünüyor ve butonlardaki ikonlar  biraz daha yaklaşıp  daha büyük bir halle geliyor  Butonların arkaplanında  bulunan renkli resimler kodları  alınarak  css  dosyasının içine  kod  olarak entegre edildiği saf  Css3  gibi  görünüyor. olsa da saf css  değil.

Kullanım

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

Css dosya  adresi : 

<link href="stil.css" media="all" rel="stylesheet" type="text/css" />
  •  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

<div class="gridcontainer clearfix">
	<div class="grid_3">
		<div class="fmcircle_out">
			<a href="http://mintik.com/?p=11865">
				<div class="fmcircle_border">
					<div class="fmcircle_in fmcircle_blue">
						<span>Web-Design</span><img src="https://dl.dropbox.com/u/65958930/uploads/cssdeck/design.png" alt="" />
					</div>
				</div>
			</a>
		</div>
	</div>

	<div class="grid_3">
		<div class="fmcircle_out">
			<a href="http://mintik.com/?p=11865">
				<div class="fmcircle_border">
					<div class="fmcircle_in fmcircle_green">
						<span>Branding</span><img src="https://dl.dropbox.com/u/65958930/uploads/cssdeck/logo.png" alt="" />
					</div>
				</div>
			</a>
		</div>
	</div>

	<div class="grid_3">
		<div class="fmcircle_out">
			<a href="http://mintik.com/?p=11865">
				<div class="fmcircle_border">
					<div class="fmcircle_in fmcircle_red">
						<span>Integration</span><img src="https://dl.dropbox.com/u/65958930/uploads/cssdeck/develop.png" alt="" />
					</div>
				</div>
			</a>
		</div>
	</div>
</div>

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-06-08 tarihinde yayınlandı,Toplam 1421 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...