Discoverer
Gönderi paylaştı
4 yıl önce

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="https://www.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="https://www.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="https://www.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>

 

Tags:
hover
senin düşüncelerini merak ediyor. Yorum yap
Mintik'e katıl

"Giriş yaparak Mintik'in Hizmet Şartlarını kabul ettiğinizi ve Gizlilik Politikasının geçerli olduğunu onayladığınızı kabul etmiş olursunuz."

İlginizi çekebilecek konular