Értesítés, hogy le ne maradj semmiről! Iratkozz fel és értesülj azonnal a legfrisebb tartalmakról! Nálunk te döntöd el, miről kérsz értesítést! Feliratkozok Többet szeretnék megtudni
Dev

Közösségi gombocskák

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 Egy srác akit nagyon érdekel a technológia, a fejlesztés és az alkotás.
Hozzászólások -
Vendég profilképe Vendég
{{comment.dateWrite}} Válasz
Válasz {{answer.dateWrite}}