Beatiful animated buttons

By

iconic-buttons

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>

 



Leave a Comment

Your email address will not be published.

You may also like

Trend