CSS - Liens

Liens Non Visités

Les liens non visités sont l'état par défaut d'un lien qui n'a pas encore été cliqué par l'utilisateur. Par défaut, les navigateurs stylisent généralement les liens non visités avec un soulignement et une couleur bleue. Cependant, vous pouvez modifier ces styles par défaut en utilisant CSS.

Pour styliser les liens non visités, vous pouvez utiliser le sélecteur a dans votre code CSS.

a {
  color: #ff0000;
  text-decoration: none;
}

Les liens non visités auront une couleur rouge (#ff0000) et le soulignement sera supprimé (text-decoration: none).

Vous pouvez appliquer divers styles aux liens non visités, comme changer l'épaisseur de la police, la taille de la police, la couleur de fond, ou ajouter des bordures.

a {
  color: #333;
  font-weight: bold;
  border-bottom: 2px solid #333;
  transition: border-bottom-color 0.3s;
}

Ce style donnera aux liens non visités une couleur gris foncé, une police en gras, et une bordure inférieure solide qui change de couleur en transition au survol.

Liens Visités

Les liens visités sont ceux qui ont déjà été cliqués et visités par l'utilisateur. Les navigateurs stylisent généralement les liens visités avec une couleur violette pour les différencier des liens non visités.

Pour styliser les liens visités, vous pouvez utiliser la pseudo-classe :visited dans votre code CSS.

a:visited {
  color: #800080;
}

Les liens visités auront une couleur violette (#800080).

Pour des raisons de confidentialité, les styles pour les liens visités sont limités. Vous ne pouvez changer que leurs propriétés de couleur comme la couleur de fond ou la couleur de bordure.

a:visited {
  color: #999;
  border-bottom-color: #999;
}

Cela donne aux liens visités une couleur gris clair et une bordure inférieure assortie.

État de Survol

L'état de survol est déclenché lorsque les utilisateurs passent leur souris sur un lien. Cela vous permet de créer des effets interactifs et de fournir un retour visuel.

Pour styliser les liens survolés, utilisez la pseudo-classe :hover dans votre code CSS.

a:hover {
  color: #ff0000;
  text-decoration: underline;
}

Lorsque les utilisateurs survolent un hyperlien, sa couleur change en rouge (#FF0000) tout en le soulignant.

Vous pouvez également appliquer différents styles aux liens survolés, comme changer les arrière-plans, les bordures, les transformations, etc.

a:hover {
  background-color: #f5f5f5;
  border-bottom-color: #FF0000;
  transform: translateY(-2px);
}

Cela donnerait un arrière-plan légèrement grisâtre avec une bordure inférieure rouge et un léger mouvement vers le haut.

État Actif

Les états actifs sont déclenchés chaque fois qu'un hyperlien est cliqué, fournissant un retour visuel indiquant l'état d'interaction actuel. Pour styliser les hyperliens actifs, utilisez la pseudo-classe :active dans le code CSS.

a:active {
  color: black;
  background-color: #F5F5F5;
}

Lors du clic sur un hyperlien, sa couleur devient noire tandis que l'arrière-plan passe à une teinte grisâtre claire (#F5F5F5).

Diverses autres stylisations peuvent être appliquées aux hyperliens actifs, y compris la modification des polices, des épaisseurs, des bordures, des transformations, etc.

a:active {
  font-weight: bold;
  transform: scale(95%);
}

Un tel style rend les polices plus grasses et les réduit légèrement à 95% de leur taille pendant les événements de clic. N'oubliez pas que les états actifs restent temporaires, ne durant que le temps du clic, après quoi ils reviennent soit à l'état de survol, soit à l'état non visité selon le cas.

En combinant les styles pour différents états de liens (non visité, visité, survol, actif), vous créez des expériences interactives visuellement attrayantes améliorant l'utilisabilité globale des pages web.

Couleur

La propriété color définit la couleur du texte du lien. Vous pouvez utiliser des noms de couleurs, des valeurs hexadécimales, RGB ou HSL pour spécifier la couleur souhaitée.

a {
  color: #ff0000; /* Couleur rouge */
}

Décoration du texte

La propriété text-decoration est utilisée pour ajouter ou supprimer des soulignements, des surlignements ou des barrés des liens. Par défaut, les liens sont soulignés.

a {
  text-decoration: none;
}

Couleur de fond

La propriété background-color définit la couleur de fond du lien. Cela peut être utile pour créer des liens ressemblant à des boutons ou pour mettre en évidence des liens importants.

a {
  background-color: #f5f5f5;
  padding: 5px 10px;
}

Bordure

La propriété border vous permet d'ajouter des bordures autour des liens. Vous pouvez définir la largeur, le style et la couleur de la bordure en utilisant les propriétés border-width, border-style et border-color.

a {
  border: 2px solid #000;
  padding: 5px 10px;
}

Remplissage et marge

La propriété padding ajoute de l'espace à l'intérieur du lien, tandis que la propriété margin ajoute de l'espace à l'extérieur du lien. Ces propriétés contrôlent la taille et l'espacement des liens.

a {
  padding: 10px;
  margin: 5px;
  display: inline-block;
}

Styles de police

Vous pouvez modifier les polices des liens en utilisant des propriétés comme font-family, font-size, font-weight et font-style.

a {
  font-family: Arial, sans-serif; 
  font-size: 16px; 
  font-weight: bold; 
  font-style: italic;
}

Transitions et animations

Les transitions et animations CSS créent des effets fluides lors du survol ou du clic sur les liens.

a {
  transition: color 0.3s ease;
}
a:hover {
  color: #ff0000;
}

Styles de base pour les boutons de lien

a.button {
  display: inline-block;
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 4px;
}

Le lien avec la classe "button" aura une couleur de fond bleue (#007bff), une couleur de texte blanche (#fff), un rembourrage de 10 pixels en haut et en bas et de 20 pixels à gauche et à droite, pas de soulignement (text-decoration: none), et des coins arrondis avec un rayon de bordure de 4 pixels.

Vous pouvez modifier davantage les styles du bouton pour l'adapter à votre design. Par exemple, vous pouvez ajouter une bordure, changer la couleur de fond au survol, ou appliquer une ombre portée.

Amélioration des styles de bouton de lien

a.button {
  display: inline-block;
  background-color: #007bff;
  color: #fff;
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 4px;
  border: 2px solid #007bff;
  transition: background-color 0.3s ease;
}

a.button:hover {
  background-color: #0056b3;
}

Dans cette version améliorée, le bouton de lien a une bordure solide de la même couleur que le fond. La propriété transition est utilisée pour animer le changement de couleur de fond au survol. Lorsque vous passez la souris dessus, il change pour une teinte plus foncée (#0056b3).

Les boutons de lien sont couramment utilisés pour des actions importantes ou des liens proéminents dans une page web. Ils aident à guider l'attention des utilisateurs et les encouragent à cliquer. Voici quelques exemples :

1. Les boutons d'action primaire sont utilisés pour les actions principales comme "S'inscrire" ou "Acheter maintenant". Ils ont généralement des couleurs proéminentes.
2. Les boutons d'action secondaire sont utilisés pour des actions moins importantes.
3. Les boutons contour ont des fonds transparents avec des bordures colorées.
4. Les boutons dégradés utilisent des transitions graduelles entre les couleurs comme arrière-plan.

Lors de la stylisation des boutons de lien, gardez-les cohérents sur l'ensemble de votre site web en utilisant des couleurs, des tailles et des styles qui correspondent au design global et à l'identité visuelle de votre site.

Ajout d'icônes à l'aide d'images d'arrière-plan

a.icon-link {
  padding-left: 25px;
  background-image: url('path/to/icon.png');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20px 20px;
}

Le lien avec la classe "icon-link" aura une icône affichée à gauche du texte du lien. La propriété padding-left crée de l'espace pour l'icône, et la propriété background-image spécifie où trouver le fichier image de l'icône.

La propriété background-repeat est définie sur no-repeat pour empêcher la répétition, et la propriété background-position la place au centre gauche. La propriété background-size définit sa taille à 20 pixels sur 20 pixels.

Utilisation de sprites CSS pour les icônes de liens

Si vous avez plusieurs icônes ou graphiques pour différents liens, vous pouvez utiliser des sprites CSS pour les combiner en un seul fichier image. Cela réduit les requêtes HTTP et améliore les performances.

a.sprite-link {
  padding-left: 25px;
  background-image: url('path/to/sprite.png');
  background-repeat: no-repeat;
}

a.link-1 {
    background-position:0 -0px; 
}

a.link-2 {
    background-position:-0 -50px; 
}

Une image sprite contient plusieurs icônes positionnées verticalement. Chaque lien a une classe spécifique (link-1, link-2) qui définit sa position dans cette image sprite.

Positionnement et dimensionnement des icônes de liens

Vous pouvez contrôler où une icône apparaît par rapport à votre texte en utilisant des propriétés CSS comme le positionnement (horizontal/vertical)

a.icon-link {
   padding-left: 25px;
   background-image: url('path/to/icon.png');
   background-repeat: no-repeat;
   background-position: 5px center;
}

Ici, nous voyons comment notre icône est placée exactement à cinq pixels de distance horizontalement tout en restant centrée verticalement dans notre élément de lien hypertexte !

Pour modifier la taille de ces aides visuelles à l'écran, ajustez simplement leurs dimensions via l'attribut "Background Size" :

a.icon-link {
   padding-left: 35px;
   background-image: url('path/to/icon.png');
   background-repeat: no-repeat;
   background-position: left center;
   background-size: 30px 30px; 
}

L'ajout d'un texte alternatif pertinent et cohérent via les attributs d'étiquette ARIA garantit que tout le monde bénéficie également, indépendamment des handicaps qu'ils peuvent rencontrer lors de la navigation sur des pages web contenant de tels liens hypertextes visuellement améliorés !