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.
Hozzászólások
-