CSS Social Buttons, des icônes personnalisables en CSS


CSS Social Buttons est un set d’icônes représentant les plus grands réseaux sociaux et des pictogrammes courants. Elles sont identiques quel que soit le navigateur et surtout elle sont personnalisables très facilement.
Le designer a d’ailleurs prévu tout un tas d’options des plus attirantes dans des classes CSS ultra pratiques.

Pour insérer l’icône sur votre site il suffit de référencer la feuille de styles et d’appliquer les classes à des éléments. La première d’entre elles est la classe .sb; elle est suivi par d’autre beaucoup plus spécifiques : couleur, réseau, effet, taille, texture …

<a href="#" class="sb orange twitter">Twitter</a>

<p class="sb gradient blue">
	<a href="#" class="facebook">Facebook</a>
</p>

<ul class="sb circle gray text">
	<li><a href="#" class="twitter">Twitter</a></li>
</ul>

Les possibilités sont énormes, tant le nombre de combinaisons est important. Voici toutes les classes de base possibles :

default, small, large, blue, purple, red, green, orange, brown, black, gray, light-gray, light-blue ,light-purple ,pink ,light-green ,yellow, min, flat, circle, embossed, pressed, thick-border, no-border, no-shadow, gradient, glossy, text, twitter, facebook, heart, linkedin, pinterest, podcast, rss, share_this, star, vimeo, ...

Et si il vous manque un réseau, il vous suffit de l’ajouter :

a.sb.youtube {
	background-image: url(images/youtube.png);
}
a.sb.email {
	background-image: url(images/email.png);
}

Pratique !

Il y a encore pleins d’autres options à découvrir.

En savoir plus sur CSS Social Buttons