Navigation

Toutes les catégories

Voir les derniers articles

12 animations CSS pour les bordures de vos éléments

Les animations CSS sont idéales pour dynamiser votre site web et peuvent être appliquées à de nombreux endroits : sur votre texte, vos...

Publié par Charlotte Chollat

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.



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.



 

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.



 

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.



 

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 !



 

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.



 

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.

 

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.



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.



 

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.



 

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 🙂



 

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.



Lire la suite de l'article
Afficher les commentaires (0)

Commentaires

Newsletter WebActus

Abonnez-vous pour recevoir notre sélection des meilleurs articles directement dans votre boîte mail.

Nous ne partagerons pas votre adresse e-mail.

Articles similaires

Graphisme

7 façons créatives de photographier un portrait

Les portraits ne vont pas tarder à être une composante essentielle de votre stratégie de communication. Parce que l’esprit humain est automatiquement...

Publié le par Melanie De Coster
Graphisme

10 exemples de logos pour boîte de nuit

Vous recherchez des idées de logo originales pour une boîte de nuit, un bar à ambiance ou une discothèque ? Quelle que soit l’ambiance et la...

Publié le par Leo Chatillon