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 (@folaad) 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 (@faustdp) 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.
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.
À lire aussi : CTA : 6 erreurs courantes qui vous font perdre des conversions
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 Untitled by thykka (@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 Untitled 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.
À lire aussi : Web Design : Le guide complet sur l’animation
Notre astuce pour créer des CTA originaux en CSS
Pour créer des CTA originaux et pour augmenter le taux de conversion de vos pages, faites appel à un webdesigner pour les concevoir et les mettre en place sur votre site.
Déposez un projet gratuitement sur Graphiste.com pour trouver un freelance en mesure de réaliser votre projet !
