Comment réaliser un effet ascenseur sur vos boutons d’abonnements sociaux en CSS.

Voici une petite astuce qui vous permettra de personnaliser votre thème et en particulier vos boutons d’abonnement aux différents réseaux sociaux. Le but de ce tutoriel est d’appliquer un effet ascenseur en CSS à vos boutons.

Si avant de commencer vous voulez voir ce que ça donne regarder en haut de cette page mes boutons d’abonnements. J’ai supprimé mes boutons d’abonnement dans la sidebar au profit de boutons plus petits dans le header de mon blog.

Ensuite au survol de la souris, l’image est remplacée par la couleur officielle du réseau social. Comme par exemple ici le flux RSS.

Le plus dur étant de trouver des icônes qui vous plaisent et qui s’intègrent bien dans la charte graphique de votre blog.

Généralement j’utilise le site Deviantart pour trouver des images et/ou des icônes de qualités et originales.

Pour ce tutoriel j’ai choisi les icônes de Somacro. Vous pouvez télécharger le pack à partir de cette URL : http://vervex.deviantart.com/art/Somicro-40-Free-Social-Media-Icons-257232757

Une fois vos icônes de choisi vous devez les modifier pour faire un effet de transition. Par exemple pour mon blog j’ai transformé les icones en gris-noir. Vous pouvez faire cela très facilement à l’aide de Photoshop par exemple.

Ouvrez l’image dans Photoshop, puis créer un calque.

Sélectionner Calque 1 copie et allez dans Image -> Réglages -> Noir et Blanc.

Puis jouer sur les différentes nuances de couleurs jusqu’à arriver à celle qui vous convienne.

Maintenant créer une autre image avec les dimensions suivantes : 34 X 64.

Faites un copier coller de l’image en noire. L’image qui est affichée en premier doit être placée en haut. Vous devez bien la coller en haut.

Puis faites la même chose avec l’image originale et placer là en bas.

Enregistrez votre composition au format PNG et copier l’image dans votre répertoire images de votre thème. Si vous travaillez avec WordPress biensûr.

Maintenant voici le code à ajouter dans votre fichier style.css de votre thème  (A vous d’adpater pour chaque image du bouton) :

[css] .social-media-icons {
float: right;
margin-top: 15px;
}
a.social-media-icon {
background-position: 0 0;
display: inline-block;
height: 32px;
margin-right: 6px;
overflow: hidden;
text-indent: -1000px;
transition: background-position 0.25s ease 0s;
width: 32px;
}
a.social-media-icon:hover {
background-position: 0 -32px;
}
/** Lien pointant vers les images – A adapter **/
.facebook {
background-image: url("images/facebook.png");
}
.twitter {
background-image: url("images/twitter.png");
}
.google-plus {
background-image: url("images/google-plus.png");
}
[/css]

Voici maintenant le code HTML à insérer dans une de vos pages. Par exemple pour mon blog j’ai choisi d’afficher les boutons dans le header.

[html] <div id="social-media-icons">
<a class="social-media-icon facebook" href="LIEN VERS PAGE FB" target="_blank">Facebook</a>
<a class="social-media-icon twitter" href="LIEN VERS TWITTER" target="_blank">Twitter</a>
<a class="social-media-icon google-plus" href="LIEN VERS G+" target="_blank">Google+</a>
</div>
[/html]

 

Voilà, il faudra sûrement adapter un peu le code CSS mais rien de bien méchant.

Vous pouvez télécharger mon pack d’icônes prêt à l’emploi en cliquant sur ce lien : pack d’icônes réseau sociaux.

Source: Merci à Florent de restezconnectes.fr pour ces codes sources.

That’s All.