Créer un bouton de partage animé

Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Paul Underwood, How To Create A CSS Animated Share Button.

Tous les sites ont aujourd'hui des boutons de partage de contenu vers les réseaux sociaux. Si ce n'est pas votre cas, vous devriez en incorporer. Ces boutons sont le meilleur moyen de donner la possibilité à vos visiteurs de partager les contenus de votre site avec leurs amis et leurs « followers ».

L'inconvénient de ces boutons de partage c'est qu'ils se ressemblent tous, quel que soit le site Web visité. Mais c'est également un avantage, cette ressemblance permet aux visiteurs de facilement les repérer.

Dans cet article nous allons donc apprendre à créer un bouton de partage de contenu original pour les principaux réseaux sociaux.

Tout d'abord , nous allons écrire le HTML qui va afficher le texte Partager cette page . Puis quand le curseur de la souris passera sur ce texte nous allons utiliser les animations CSS pour afficher les boutons de partage .

Le code HTML que nous allons écrire contiendra plusieurs sections que nous allons séparer en utilisant différents éléments HTML, le tout étant contenu dans une div sur laquelle on appliquera la classe CSS share_button .

<div class="share_button">
</div>

Ce bouton s'animera par le centre pour afficher les boutons de partage, nous allons donc ajouter deux sections que nous utiliserons pour séparer le texte.

<div class="share_button">
<section>
<article>
<h1>Share th</h1>
</article>
</section>
<section>
<article>
<h1>is Page</h1>
</article>
</section></div>

À l'intérieur de ces deux sections nous allons afficher ou cacher les éléments <article> pour faire apparaître les boutons de partage. Dans cet exemple il y aura deux boutons par article, soit un total de quatre boutons de partage.

Le code suivant est à utiliser sur une page PHP WordPress car nous utilisons la fonction the_permalink() . Si vous n'utilisez pas WordPress, remplacez la fonction par l' URL de la page que vous souhaitez partager.

<div class="share_button">
<section>
<article>
<h1>Share th</h1>
</article>
<article>
<h2><a href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>" title="Share On Facebook">F</a></h2>
<h2><a href="http://twitter.com/home?status=Share On Twitter <?php the_permalink(); ?>" title="Share On Twitter">T</a></h2>
</article>
</section>
<section>
<article>
<h1>is Page</h1>
</article>
<article>
<h2><a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" title="Share On Google Plus">G</a></h2>
<h2><a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>" title="Share On Pinterest">P</a></h2>
</article>
</section></div>

Le CSS est divisé en deux parties. Dans la première, nous allons créer le bouton ; puis nous nous occuperons de l'animation qui changera l'apparence des sections pour afficher les boutons de partage en lieu et place du texte.

Utilisez le code CSS suivant pour l'apparence du bouton :

.share_button { width: 300px;height: 70px; margin:0 auto; }
.share_button section { width: 50%; height: inherit; float: left; }
.share_button section h1 { margin-top: 13%; overflow: hidden; width: 100%;color: #fff;}
.share_button section article { position: absolute; height: inherit; width: 150px; background: #d4d5d9;
        -webkit-transition: all 600ms;
        -moz-transition: all 600ms;
        -o-transition: all 600ms;
        -ms-transition: all 600ms;
        transition: all 600ms;
        text-align: center;
}
.share_button section article h2 { display: inline-block; width: 40%;   height: 40px; overflow: hidden; margin-top: 10%; cursor: pointer; }
.share_button section article h2:hover { text-shadow:2px 2px 2px #555; }
.share_button section article h2 a { color:#FFF; text-decoration: none; }
.share_button section:first-child article:first-child{ text-align: right; }
.share_button section:last-child article:first-child{ text-align: left; }

.share_button section:first-child article:last-child,
.share_button:hover section:first-child article:first-child {
        -webkit-transform: rotateY(90deg);
        -moz-transform: rotateY(90deg);
        -o-transform: rotateY(90deg);
        -ms-transform: rotateY(90deg);
        transform: rotateY(90deg);
}
.share_button section:last-child article:last-child,
.share_button:hover section:last-child article:first-child {
        -webkit-transform: rotateY(-90deg);
        -moz-transform: rotateY(-90deg);
        -o-transform: rotateY(-90deg);
        -ms-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
}
.share_button:hover section:first-child article:last-child,
.share_button:hover section:last-child article:last-child {
        -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        transform: rotateY(0deg);
}

Nous avons vu dans ce tutoriel comment créer des boutons de partage de contenus vers les réseaux sociaux attractifs visuellement pour vos visiteurs. N'hésitez pas à jouer avec le code CSS pour les personnaliser !

Vous pouvez consulter la démonstration pour avoir un aperçu du rendu dans un navigateur.

Je tiens à remercier Paul Underwood de m'avoir autorisé à traduire son tutoriel.
Je remercie également zoom61 pour sa relecture orthographique.