5 effets de survol CSS élégants pour votre site Web [2023]
L'Importance des Effets de Survol CSS pour l'Attractivité de Votre Site Web
La majorité des sites web contemporains s'appuient sur les feuilles de style en cascade (CSS) pour leur mise en forme. Si certains sites se contentent d'utiliser des fonctionnalités CSS basiques, d'autres exploitent des techniques plus avancées pour dynamiser et rendre leurs applications web plus attrayantes.
L'intégration d'effets visuels captivants peut considérablement améliorer le taux de clics, inciter les utilisateurs à interagir avec votre contenu et prolonger la durée de leur visite sur votre site.
Cet article se propose d'explorer en détail les effets de survol CSS, de comprendre comment ils contribuent à l'attrait visuel de votre site, d'apprendre à les mettre en œuvre et d'examiner des exemples concrets de sites web qui utilisent ces effets avec élégance.
Qu'est-ce qu'un Effet de Survol CSS?
Un effet de survol CSS se manifeste lorsqu'un utilisateur déplace le curseur de sa souris au-dessus d'un élément spécifique sur une page web. Cette action peut provoquer une modification de la couleur, du texte, ou encore déclencher des animations subtiles. L'ajout de tels effets vise à renforcer l'interactivité du site et à faciliter la navigation pour l'utilisateur.
Les effets de survol CSS se présentent généralement sous deux formes : les transitions et les animations.
Transitions
Les transitions permettent de modifier l'apparence ou le comportement d'un élément de manière fluide sur une page web. Elles sont activées par un déclencheur, tel que le survol d'un élément par l'utilisateur. Une transition évolue de l'état initial à l'état final une seule fois après le déclenchement, sans possibilité de définir d'étapes intermédiaires.
Animations
Les animations, quant à elles, se basent sur des images clés, ce qui leur permet de se répéter, de boucler et de progresser entre l'état initial et l'état final, en passant par des états intermédiaires. Une image clé précise l'apparence d'un élément animé à un instant spécifique de la séquence.
Types d'Effets de Survol CSS
Les effets de survol CSS peuvent s'appliquer à divers éléments, qu'il s'agisse de texte, d'images, de vidéos, de liens ou de boutons. Voici quelques-unes des applications les plus courantes :
#1. Effets de Survol de Texte
Ces effets sont particulièrement adaptés aux sites web qui privilégient un design épuré et minimaliste. L'objectif est de transmettre un message de manière simple et directe. Ils peuvent prendre différentes formes :
- Effet de texte machine à écrire : Cet effet simule la saisie sur un traitement de texte, où les mots apparaissent progressivement. La vitesse d'apparition doit être suffisamment rapide pour assurer une lecture confortable.
- Animation de texte : Dans cet effet, le texte peut se déplacer vers le haut, le bas, ou les côtés.
#2. Effets de Survol de Lien
La plupart des sites web contiennent de nombreux hyperliens qui redirigent les utilisateurs vers différentes pages. À mesure que le site grandit, le nombre de liens augmente. Les effets de survol de lien peuvent se manifester de différentes manières :
- Changement de couleur du lien : La couleur du lien peut changer, par exemple, du bleu au rouge.
- Modification de la couleur d'arrière-plan : L'arrière-plan du lien change de couleur au survol.
- Échange de texte : Le texte ou l'icône du lien est remplacé par un autre.
#3. Effets de Survol de Bouton
Les boutons sont essentiels dans un site web, car ils permettent de soumettre des formulaires et d'accéder à différentes sections. Les effets de survol sur les boutons peuvent prendre différentes formes :
- Changement de couleur du texte : La couleur du texte du bouton, par exemple "Cliquez ici", peut changer au survol, passant du rouge au vert.
- Modification de la couleur de fond : Les boutons HTML sont transparents par défaut. Les développeurs peuvent y ajouter une couleur de fond qui peut changer au survol, par exemple, du marron au vert.
- Effet de rebond : Pour ajouter un attrait visuel, le bouton peut sembler rebondir légèrement au survol.
#4. Effets de Survol d'Image
- Échange d'images : On peut créer un carrousel d'images qui s'échangent au survol.
- Images en fondu entrant/sortant : L'image devient plus claire lorsqu'on la survole.
Échange de texte : Il est fréquent de trouver des sites web qui masquent des descriptions sous leurs images. Par exemple, sur un site de voyage, les détails d'un hôtel peuvent apparaître lorsqu'on survole l'image.
Explorons maintenant quelques effets de survol CSS élégants que vous pouvez appliquer à votre site web.
Changement de la Couleur d'Arrière-Plan au Survol
Cet effet peut être appliqué à des boutons, des liens, ou du texte. La couleur de fond change lorsque le curseur de la souris survole l'élément cible.
Voici les étapes pour modifier la couleur de fond de votre texte :
- Utilisez la pseudo-classe :hover pour cibler l'élément lors du survol.
- Créez un élément HTML (div, bouton, lien) sur lequel l'effet de survol sera appliqué.
Voici un exemple de code pour mettre en œuvre cet effet:
Fichier HTML :
<html lang="fr"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css"> </head> <body> <div> Survolez-moi pour voir le changement !!!!! </div> </body> </html>
Fichier CSS :
div:hover {
background-color: rgb(255, 0, 0);
width: 18rem;
align-items: center;
text-align: center;
}
Avant le survol, le résultat est :
Après le survol, le résultat devient :
Changement de la Couleur du Lien au Survol
Les liens sont des éléments essentiels sur une page web, car ils permettent de naviguer d'une page à une autre. On utilise la balise HTML pour créer des hyperliens. Modifier la couleur d'un lien au survol augmente sa visibilité.
Voici les éléments nécessaires pour cet effet:
- Créez un sélecteur sur votre balise :head ou :body.
- Définissez la pseudo-classe :hover.
Cet exemple de code permet de créer un lien qui passe du vert à l'orange au survol.
Fichier HTML :
<html lang="fr"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css"> </head> <body> <div> <a href="#">Survolez-moi pour voir la magie</a> </div> </body> </html>
Fichier CSS :
a:link {
color: rgb(0, 255, 34);
}
a:hover {
color: #ff8400;
}
Résultat avant le survol :
Résultat après le survol :
Glissement de Surlignage au Survol
Cet effet ajoute une ombre à un lien lorsqu'un utilisateur le survole. La couleur du lien change également pendant le processus. Pour l'implémenter, suivez ces étapes :
- Ajoutez un espacement autour du lien (par exemple 0 .25rem).
- Ajoutez une marge de valeur similaire. Cela évite que l'espacement ne perturbe le flux du texte.
Un simple fichier HTML pourrait être :
<html lang="fr"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <a href="#">toptips.fr</a> <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css"> </head> <body> </body> </html>
Voici le fichier CSS correspondant :
a {
box-shadow: inset 0 0 0 0 rgb(255, 21, 0);
color: #ff4000;
padding: 0 .25rem;
margin: 0 -.25rem;
transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
a:hover {
color: #fff;
box-shadow: inset 200px 0 0 0 #ff4000;;
}
a {
color: #ff4000;
font-family: 'Poppins', sans-serif;
font-size: 27px;
font-weight: 700;
line-height: 1.5;
text-decoration: none;
}
body {
display: grid;
}
Avant le survol :
Après le survol :
Soulignement Arc-en-Ciel au Survol
Cet effet ajoute un soulignement multicolore au texte lorsque l'utilisateur le survole.
- Utilisez la pseudo-classe `linear-gradient` pour créer une transition fluide entre différentes couleurs.
- Utilisez la pseudo-classe :hover pour cibler l'élément au survol.
- Créez un élément de lien où l'effet de survol sera appliqué.
Voici un exemple de code pour mettre en œuvre le soulignement arc-en-ciel :
Fichier HTML :
<html lang="fr"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css"> </head> <body> <div> <p>Ceci est un effet de survol <a href="#">Arc-en-Ciel</a>. </p> </div> </body> </html>
Fichier CSS :
p {
max-width: 800px;
margin: auto 15%;
line-height: 1.1;
font-size: 78px;
font-weight: 700;
letter-spacing: .0125em;
color: black;
}
a {
display: inline-block;
position: relative;
text-decoration: none;
color: inherit;
z-index: 1;
}
a::after {
content: '';
position: absolute;
left: 0;
bottom: .07em;
height: .1em;
width: 100%;
background: linear-gradient(110deg, #e1f549, #29d0be, #6cb8ea, #ff5959);
z-index: -1;
transition: height .25s cubic-bezier(.6,0,.4,1);
}
a:hover::after {
height: .2em;
}
p {
font-size: 58px;
}
Avant le survol :
Après le survol :
Échange de Texte au Survol
L'échange de texte se produit lorsqu'un texte est remplacé par un autre contenu ou texte lorsqu'un utilisateur survole un élément cible. Par exemple, un lien "commentaires" pourrait se transformer en "Ajouter un commentaire" au survol.
Pour implémenter cet effet, vous aurez besoin de :
- Les pseudo-éléments ::before et ::after, qui créent un élément séparé pour le texte qui sera affiché au survol.
- Le pseudo-élément :hover, qui modifie la position ou la visibilité du contenu lors du survol.
Voici une illustration de la mise en œuvre de cet effet :
Fichier HTML :
<html lang="fr"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css"> </head> <body> <button><span>99 commentaires</span></button> </body> </html>
Fichier CSS :
button { width: 10em }
button { height: 3em }
button:hover span { display: none }
button:hover:before { content: "Ajouter un Commentaire" }
Avant le survol :
Après le survol :
Sites Web Utilisant des Effets de Survol Impressionnants
Si vous cherchez des idées et de l'inspiration, voici quelques sites web à consulter :
#1. Canva
Canva est une référence dans le monde du design, car il permet à des personnes sans compétences particulières de créer de magnifiques visuels. Ce site web utilise des effets de survol impressionnants, de sa page d'accueil à ses pages de produits. Tout commence avec un fond sombre et flou sur la page d'accueil, qui s'estompe au survol pour laisser apparaître les images. Des effets de survol apparaissent également lors du choix de différents modèles de conception.
#2. Haus
Haus est un exemple parfait de site web qui utilise le soulignement au survol, l'échange de texte au survol et la modification de la couleur d'arrière-plan au survol.
#3. Mainworks
Mainworks utilise à la fois des animations et des transitions pour ses effets de survol. Parmi les effets notables, on trouve l'échange de texte au survol, la modification de la couleur du texte et le zoom sur le texte et les images au survol.
Conclusion
Le choix des effets de survol à intégrer à votre site web dépendra du type de site, de vos compétences, de vos goûts et de vos préférences. Certains sites, tels que les plateformes d'art ou de coupons, peuvent accueillir des effets de survol très tape-à-l'œil, tandis que des sites web juridiques ou médicaux peuvent préférer des effets plus subtils.
Il est donc important de déterminer ce qui convient le mieux à votre site web. Assurez-vous que ces effets soient en accord avec les couleurs de votre marque. N'hésitez pas à consulter nos ressources CSS pour perfectionner vos compétences dans ce domaine.