Also ich hab die Thematik jetzt begriffen und auch fertiggestellt. Für alle die es interessiert:
Ich habe den CSS-Code jetzt auf das a-Tag ausgelagert und arbeite mit ID's, um jeweils die gleiche Formatierung zu haben, aber immer ein unterschiedliches Bild.
CSS
HTML
.socialbutton{
display: inline-block;
height: 64px;
line-height: 0;
text-indent: -9999px;
width: 64px;
}
#link1 {background: url(images/social/facebook.png);}
#link2 {background: url(images/social/google.png);}
#link3 {background: url(images/social/twitter.png);}
#link4 {background: url(images/social/rss.png);}
#link1:hover {background: url(images/social/facebook-hover.png);}
#link2:hover {background: url(images/social/google-hover.png);}
#link3:hover {background: url(images/social/twitter-hover.png);}
#link4:hover {background: url(images/social/rss-hover.png);}
}
Alles anzeigen
HTML
HTML
<a class="socialbutton" id="link1" target="_blank" title=geld-und-welt.de Facebook" href="http://www.facebook.com/GeldundWeltde">Button1</a>
Beste Grüße, Skatze