Les animations CSS sont idéales pour dynamiser votre site web et peuvent être appliquées à de nombreux endroits : sur votre texte, vos call-to-action, les transitions entre vos pages, le loader, etc.
Dans cet article, vous allez découvrir 12 superbes animations de bordure que vous pourrez appliquer à vos boutons, mais aussi à vos images ou conteneurs.
Bordure animée aux quatre coins
Un trait lumineux qui apparaît aux quatre coins de votre élément, voilà de quoi attirer l’oeil de vos visiteurs. Cette animation CSS trouvera sa place sur un call-to-action, mais attention à l’utiliser avec parcimonie.
Une animation qui tourne en continu peut vite devenir agaçante et perturber la lecture du texte alentour.
See the Pen border-animation-css by Swarup Kumar Kuila (@uiswarup) on CodePen.
Bordure animée avec apparition de call-to-action
Cette animation CSS laisse apparaître un call-to-action avec une fine bordure. La transformation du trait sous le titre est ingénieuse et peut venir renforcer votre image professionnelle.
See the Pen Draw borders from center! by Ben Sheppard (@flatking) on CodePen.
Bordure animée avec édition du texte
D’accord, cette animation est quelque peu originale mais elle saura divertir vos utilisateurs. Vous verrez qu’en éditant le texte la bordure intérieure s’adapte.
See the Pen Reddit border inset challenge by David Darnes (@daviddarnes) on CodePen.
Bordure animée en gradient
Le gradient est tendance, alors pourquoi ne pas l’intégrer à vos animations CSS ? Celle-ci est particulièrement intéressante puisque vous pouvez choisir entre une bordure fixe ou animée. Dans ce dernier cas, évitez une vitesse trop rapide qui donnerai le tournis à vos visiteurs.
See the Pen Border-gradient mixin by John Grishin (@exah) on CodePen.
Bordure animée avec changement de couleur
Simple mais efficace, voilà comment résumer cette animation CSS. Le choix des couleurs est adapté au message que veux faire passer le bouton, c’est donc un bon exemple à suivre !
See the Pen SVG Ellipse Border Animation by Corey Bullman (@coreybullman) on CodePen.
Bordure animée avec arrondi
Ici ce n’est pas que la bordure qui s’anime, c’est également son ombre. Regardez plus bas pour voir la feuille s’arrondir.
See the Pen rounded side border radius by Joe (@joeashworth) on CodePen.
Bordure gauche animée et colorée
Parfois les animations les plus discrètes sont les meilleures. L’apparition de cette fine bordure colorée ne dérange absolument pas la lecture, elle met au contraire en valeur le conteneur.
See the Pen Card with animated left border on hover by Tony Phipps (@neutraltone) on CodePen.
Bordure animée avec fermeture verticale
Avez-vous remarqué que plus la bordure est fine, plus le résultat renvoie une image professionnelle, voire de luxe ? La couleur dorée et la vitesse adaptée accentuent encore plus cet effet.
See the Pen Animated border tracing by Jameal G (@realjameal) on CodePen.
Bordure animée avec fermeture horizontale
Pour faire comprendre qu’un texte est en fait un bouton permettant une action, il est essentiel de lui donner une bordure.
L’apparition de celle-ci au survol de la souris est un choix risqué, mais en respectant les règles de l’UX Writing les utilisateurs n’auront aucun mal à comprendre qu’il s’agit d’un call-to-action.
See the Pen Double border animation by Antares (@antares) on CodePen.
Bordure animée élargie
Faites comprendre à votre utilisateur qu’il s’apprête à cliquer sur un bouton en élargissant la bordure de ce dernier. Cette animation CSS peut facilement être personnalisée pour correspondre à votre charte graphique.
See the Pen Border Animation CSS (Box-Shadow) by Felipe Vegners (@felipevegners) on CodePen.
Bordure animée géométrique
Cette animation CSS est idéale pour les sites web d’architecture ou pour apporter une touche de créativité surprenante 🙂
See the Pen CSS Border Animation by LycanOne (@lycanone) on CodePen.
Bordure animée avec apparition et disparition
Nous terminons cette sélection par cette simple animation CSS qui laisse apparaître puis disparaître la bordure de l’élément.
Comme pour la première, elle est parfaite pour attirer le regard, surtout si la vitesse de l’animation n’est pas trop rapide.
See the Pen Css Border Animation by Nedim (@nedimtas) on CodePen.
À lire aussi : Web Design : Le guide complet sur l’animation
Notre astuce pour créer une bordure en CSS
Pour créer des bordures en CSS uniques pour votre site, vous pouvez vous inspirer de ces ressources et les adapter au style de votre site internet.
Vous pouvez également faire appel à un webdesigner freelance sur Graphiste.com en déposant un projet gratuitement ! Comparez les propositions des freelances et sélectionnez le prestataire avec la meilleure proposition.
