Les call-to-action ont un rôle essentiel puisqu’ils vous permettent de convertir les visiteurs de votre site.

Nous avons déjà vu que l’efficacité d’un CTA dépend de son design et nous vous avons fournit quelques conseils pour perfectionner le design de vos boutons.

Mais si cela ne suffit pas à inciter au clic, pourquoi ne pas ajouter de l’animation pour attirer l’attention de vos visiteurs ? Laissez vous inspirer par notre sélection de 15 animations CSS pour vos boutons.

Mouvement autour du bouton

Cette micro-interaction se compose de deux ronds bougeant autour de votre bouton.

Attirés par ce mouvement, vos visiteurs passeront plus facilement la souris sur le texte, de dernier prenant alors la forme d’un véritable bouton.

See the Pen UI Button Hover Effect #2 by Daniel Gonzalez (@dan10gc) on CodePen.

Effet zoom

Ce bouton laissera apparaître un reflet dans le coin supérieur gauche du bouton et le texte sera zoomé au passage de la souris. De quoi inciter votre visiteur à cliquer sur votre CTA.

See the Pen Shiny button by Antonio (@conlaccento) on CodePen.

Style cartoon

Le design d’un bouton est important alors donnez lui un style cartoon pour vous démarquer.

La micro-interaction au passage de la souris est également très incitative.

See the Pen CSS BUTTON HOVER by Imran Pardes (@ImranPardes) on CodePen.

Bouton de téléchargement animé

Surprenez vos visiteurs avec ce bouton de téléchargement sophistiqué.

En cliquant dessus, le bouton se transforme en chargeur circulaire pour montrer la progression du téléchargement. Remarquez le bouton d’arrêt pour éventuellement arrêter le téléchargement. À la fin, vous obtenez un message de confirmation indiquant que le téléchargement a réussi.

See the Pen download button animation by Denis Pasko (@indaFaust) on CodePen.

Formulaire caché

Poussez vos visiteurs à l’action tout en douceur.

Le formulaire pour saisir son adresse email n’apparaît que lorsque l’on clique sur le bouton.

See the Pen Email Optin by Adam Rasheed (@adamrasheed) on CodePen.

See the Pen Notify Me by Danny (@edanny) on CodePen.

Effet gluant

En plus de laisser apparaître vos réseaux sociaux au clic de la souris, ajoutez un effet gluant. Surprise garantie.

See the Pen SVG Filter Gooey Share, Social Media Button by Sasha (@sashatran) on CodePen.

Animation de l’icône d’envoi

Pour confirmer l’envoi d’une donné, ne vous contentez pas d’un simple message de confirmation.

Vous pouvez aller plus loin en animant votre icône pour symboliser concrètement que le document a été envoyé.

See the Pen Submit Button Animation by burnaDLX (@burnaDLX) on CodePen.

Barre de chargement

Pour faire patienter votre utilisateur lors d’un téléchargement, transformez votre bouton en barre de progression. Évidemment, n’oubliez pas de lui confirmer que le téléchargement à réussi.

See the Pen ajax load button animation by ianchouinard (@ianchouinard) on CodePen.

Bouton multi-message

En général un CTA équivaut à une action. Mais si vous souhaitez un site vraiment décalé vous pouvez casser les codes avec ce bouton qui propose plusieurs messages au fur et à mesure que l’on clique dessus.

Les petites bulles de couleurs ajoutent de l’interactivité et amènent un peu plus de fantaisie.

See the Pen The uncomfortable btn by Lewi Hussey (@Lewitje) on CodePen.

Bouton fait main

Mettez de la personnalité dans votre site grâce à ces boutons qui semblent dessinés à la main. Vous pouvez même choisir votre style d’encadrement.

See the Pen Imperfect Buttons by Tiffany Rayside (@tmrDevelops) on CodePen.

Effet d’encadrement

Vous pensez qu’il s’agit d’un simple lien ? Détrompez-vous. C’est un véritable bouton et pour qu’il prenne forme il suffit de passer la souris dessus.

See the Pen Button Hover Draw – CSS Only by Luke Meyrick (@lukemeyrick) on CodePen.

Effet de dédoublement

Dédoublez votre bouton en plusieurs icônes au passage de la souris. Votre visiteur pourra alors choisir le bon réseau social.

See the Pen ZyYajb by Moses Holmström (@thykka) on CodePen.

Effet glitch

Pour les passionnés du glitch vous pouvez transformer votre bouton en scanner lors du passage de la souris.

See the Pen BRoXLW by Saijo George (@SaijoGeorge) on CodePen.

Animations diverses

Nous terminons cette sélection avec diverses animations possibles sur vos boutons lors du passage de la souris.

Ces animations sont simples mais suffisent à ajouter de l’interactivité sur votre site.

See the Pen Button Animation by Evan Pedrick (@eped22) on CodePen.