Vous êtes ici : Blog > Programmation > Créer des liens hypertextes interactifs

Créer des liens hypertextes interactifs

Pas de commentaire

Créer des liens hypertextes avec un changement de couleur du texte ou de background au survol, c'est déjà vu et revu... ! Pourquoi ne pas créer un peu plus d’interactivité et présenter cela de façon un peu différente ? En CSS3, il est possible de réaliser certaines choses sympathiques. Par exemple, dans cet article, vous verrez comment créer un effet de soulignement animé au survol de vos liens.

Créer un effet de soulignement animé au survol de liens en CSS3 :

Avant de découvrir le code, rien de tel que de voir tout de suite l'exemple pour mieux comprendre.

Voir l'exemple

Le code :

On utilise le sélecteur ::after pour créer le souligné :
  • Par défaut, il existe avec une largeur de zéro et donc ne se voit pas.
  • Au survol, avec le :hover, on définit sa nouvelle largeur à 100% par rapport au lien hypertexte.

Pour le côté interactif, on utilise les transitions CSS3 qui donneront cet effet de mouvement au survol.

Aperçu :

Exemple de liens hypertextes avec de l'intéractivité

Voilà pour la petite astuce, ce n'est pas grand chose mais toujours intéressant à mettre en place. Pas forcément sur l'ensemble de vos liens d'ailleurs..., mais par exemple uniquement dans un footer.

 
Article publié le 18/05/2016 avec 356 Vues

Laissez un commentaire :