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

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.

effet_ascenseur_css_1

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.

effet_ascenseur_css_2

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.

effet_ascenseur_css_3

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.

effet_ascenseur_css_4

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

effet_ascenseur_css_5

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.

effet_ascenseur_css_6

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

effet_ascenseur_css_7

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.

effet_ascenseur_css_8

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

effet_ascenseur_css_9

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]

effet_ascenseur_css_10

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]

 effet_ascenseur_css_11

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.

1 potin

  1. bonsoir,
    cela s’appelle les Sprites CSS il est recommandé de les utiliser pour optimiser un site, je regrette que l’auteur de Backstreet ne les ai pas utilisé pour ces icônes date,auteur, catégorie.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Aenean Donec commodo quis velit, ultricies sed
Partagez2
Tweetez3
+11
Enregistrer1
Reddit
Partagez1
Pocket
8 Partages
QuickTutoriel

GRATUIT
VOIR