1. Főoldal
  2. Cikkek
  3. Dev
  4. Közösségi gombocskák

Közösségi gombocskák

Dev

Szeretnék megosztani veletek egy általam készített kis közösségi oldal gombocskát.

Először is, hogyan néz ki?

A weboldalamon a jobb oldali Közösség boxban, és az alsó Rólunk oszlopban megtekinthetőek és kipróbálhatóak a gombjaim.

Térjünk a lényegre. Itt a CSS kód:

.social {width:32px;height:32px;display:inline-block;margin-right:2px;} 
.fb {background:url('http://ucoztaska.ucoz.hu/kepek/soc-fb.png');opacity:0.6;background-size: 32px 32px;}
.fb:hover {opacity:1;}
.tw {background:url('http://ucoztaska.ucoz.hu/kepek/soc-tw.png');opacity:0.6;background-size: 32px 32px;}
.tw:hover {opacity:1;}
.gp {background:url('http://ucoztaska.ucoz.hu/kepek/soc-gp.png');opacity:0.6;background-size: 32px 32px;}
.gp:hover {opacity:1;}
.yt {background:url('http://ucoztaska.ucoz.hu/kepek/soc-yt.png');opacity:0.6;background-size: 32px 32px;}
.yt:hover {opacity:1;}
.rss {background:url('http://ucoztaska.ucoz.hu/kepek/soc-rss.png');opacity:0.6;background-size: 32px 32px;}
.rss:hover {opacity:1;}

Itt pedig a HTML:

<a href="FACEBOOK_LINK" target="_blank"><div class="social fb"></div></a>
<a href="TWITTER_LINK" target="_blank"><div class="social tw"></div></a>
<a href="GOOGLEPLUS_LINK" target="_blank"><div class="social gp"></div></a>
<a href="YOUTUBE_LINK" target="_blank"><div class="social yt"></div></a>
<a href="RSS_LINK" target="_blank"><div class="social rss"></div></a>

Természetesen, a ...LINK szöveget módosítjuk az adott közösségi oldalon levő profil URL-címére.

Eddig csak erre a négy közösségi oldalra készítettem gombokat: Facebook, Google+, Twitter, YouTube + az RSS gomb. Az ikonok az IconFinder-ről vannak. Aki szeretné, saját szerverére hozhatja.

Remélem tetszenek.

bigblog profilképe
Sallai József @bigblog +189 Egy srác akit nagyon érdekel a technológia, a fejlesztés és az alkotás.
0 hozzászólás
Hozzászóláshoz jelentkezz be vagy Regisztrálj!