Chargement…
Un Bouton de Partage Animé en CSS

Créer Un Bouton de Partage Animé en CSS



Un bouton de partage est une des solutions utilisées pour améliorer l’affichage d’un contenu au moteurs de recherche et c’est aussi un moyen qui génère de trafic pour votre site, mais pour atteindre ses deux objectifs, il faut prendre en compte deux paramètres : Trouver la bonne place pour le bouton de partage et deuxièmement le design de ce bouton qui doit être attractive.
Dans ce web design tutoriel, on va essayer de créer un bouton de partage animé en CSS. Cette animation se présentera comme suit : Au passage de la souris sur notre Texte (Partager), des boutons de partage Facebook, Twitter et Linkedin défileront un après l’autre.

Créer Un Bouton de Partage Animé en CSS

Créer Un Bouton de Partage Animé en CSS

Avant de commencer, créer un dossier « Bouton-Partage-Animer » par exemple et avec Notepad++ créer deux fichier : index.html et style.css

Les Icônes Sous Forme de Police (Font)

Au lieu d’utiliser des icônes sous forme d’image PNG ou autre, on va utiliser une Police (Font), pour cela, téléchargez se pack d’icônes gratuites : Social Media Icons.

Maintenant il faut créer la police de ses icônes qu’on va intégrer dans notre feuille de style (CSS). Pour cela, il faut utiliser un générateur de Police : Fontsquirrel.

générateur de police (font)

– Cliquez sur « ADD Fonts »
– Ouvrez le dossier « socialico » (les icônes gratuites)
– Attachez le fichier « socialico (Open Type) »
-Cliquez sur « Download Your Kit »

Vous attendez un petit moment et vous aurez un fichier zip de genre « webfontkit-20140306-054012« . Ouvrez le fichier stylesheet.css et copiez ce code dans votre style.css :

Puis copiez les fichier socialico-webfont.ttf, socialico-webfont.eot, socialico-webfont.svg et socialico-webfont.woff dans le dossier Bouton-Partage-Animer.

Notre index.html

Dans cette partie, on va donner vie à notre bouton et ajouter les animations.
Il faut noter que dans le fichier de police d’icones (font) chaque lettre fait appel a une icône, par exemple : F pour Facebook, L pour Twitter, S pour StumbleUpon et ainsi de suite.

Pour commencer, on va créer un paragraphe avec une class Partager

Pour que les icônes se défilent et s’affiche dans la bonne position, on donne une position Relative pour le paragraphe et une position Absolute pour les icônes.
Au passage de la souris sur notre bouton, en utilise une animation Hover normal, puis avec le nouveau sélecteur CSS3 : nth-of-type (http://www.w3schools.com/cssref/sel_nth-of-type.asp) on défile les icônes.
Alors notre feuille de style (style.css) se présente comme suit :

Bonus : On a ajouter d’autres animation (flip, grow, crazy…) dans notre exemple :)

et Notre code HTML est :

Vous pouvez télécharger le code source de ce bouton :

Télécharger Code Source

Voila, vous avez créer un bouton de partage animé en CSS3. Si vous avez des questions n’hésitez pas!

Si cet article vous a plu alors n’hésitez pas à le partager avec vos amis(es), et suivez nous sur Facebook, Twitter et Google+ Pour recevoir des notifications de tous Nos nouveaux tutoriaux et conseils.



Laisser un commentaire