Créer un bouton de partage animé

aller sur le site

I. Traduction

Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Paul UnderwoodHow 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 .

Sélectionnez
<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.

Sélectionnez
<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.

Sélectionnez
<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 :

Sélectionnez
.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; }
Sélectionnez
.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.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s