Créer un bouton de partage animé

Grâce au CSS3

Paul Underwood

Traducteur

Sébastien Germez

Dans ce tutoriel nous allons voir comment créer un bouton de partage (sur les réseaux sociaux) animé avec du CSS3.

Commentez

- Titre : Créer un bouton de partage animé

- Auteur : Paul Underwood

- Traducteur : Sébastien Germez

- Parution : 20 novembre 2012

- Public visé :

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2012 Paul Underwood. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Traduction

- II. Introduction

- III. Le code HTML

- IV. Le code HTML complet

- V. Le code CSS

- VI. Conclusion

- VII. Liens

- VIII. Remerciements

I - Traduction

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

II - Introduction

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 .

III - Le code HTML

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.

IV - Le code HTML complet

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>

V - Le code CSS

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);
}

VI - Conclusion

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 !

VII - Liens

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

VIII - Remerciements

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