7 Effets sympas de survol d’un bouton en SVG et CSS

Les effets de survol lorsque vous passez votre souris sur un lien participent également à l’expérience vécue lors de la navigation sur un site internet. Voici quelques effets triés sur le volet qui viendront donner un peu de pep’s à vos prochaines créas.

Petit cercle du lien deviendra grand

Un petit cercle s’agrandit pour faire un rectangle de fond aux bords arrondis. du plus bel effet !

Effet survol bouton balayé :

Un peu longuet à mon goût en terme de timing, mais rend très bien visuellement

Effet lien survol avec des losanges :

Joli effet surtout si votre webdesign arbore déjà des losanges :

Effet blob au survol de lien :

En survolant avec votre souris votre bouton, il se déforme légèrement comme s’il était gluant

Effet graphique au survol à base de masques :

Inspiré d’un article de Codrops, cet effet au survol est très graphique et illustre un méthode qui pète. Par contre à utiliser uniquement sur les navigateurs récents.

Bordure en dégradé animé pour devenir un trait en dessous au survol :

Petit effet graphique sympa, qui peut faire la différence dans votre design.

De plus le petit dégradé de couleurs vous permettra de faire des variantes intéressantes pour les intégrer à votre projet web.

Effet tiret qui devient un trait :

Un effet original qui peut coller à certaines thématiques

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.