Effets sur les liens lors du passage de la souris

Voir le sujet précédent Voir le sujet suivant Aller en bas

CSS Effets sur les liens lors du passage de la souris

Message par Ajesto le Mer 18 Jan - 21:29

Bonjour,

Je vais vous montrer quelque liens personnaliser créer par mes soins, vous pouvez les visualiser sur cette page. Sur les illustrations, il y aura "Lien" et "Lien :hover", "Lien" est simplement le lien sans la souris dessus et "Lien :hover" c'est lorsque la souris est dessus. Compatible phpBB3, phpBB2, PunBB et Invision.

Effet 1 (Lien 1, 2 et 3):


Cet effet est simple : Lorsque la souris passe sur le lien, il y aura une bordure de 3px qui va se faire au dessus et en dessous du lien.
La couleur de la bordure est la même que la couleur du lien (Donc si le texte est blanc, bordure blanche si texte rouge, bordure rouge)
Compatible HTTPS.
Le CSS à appliquer:

Code:
a {
  transition: all 100ms ease-in-out;
  color: #fff; /* Remplacez le #fff par la couleur du lien souhaitée. Ex: #000 = Noir, #FF0000 = Rouge */
}

a:hover {
  border-bottom: 3px solid;
  border-top: 3px solid;
}

Effet 2 (Lien 4, 5 et 6):


Lorsque la souris passe sur le lien, il y aura un espace de 2 pixels qui va se faire entre les liens.
Compatible HTTPS.
Le CSS à appliquer:

Code:
a {
  transition: all 200ms ease-out;
  color: #fff; /* Remplacez le #fff par la couleur du lien souhaitée. Ex: #000 = Noir, #FF0000 = Rouge */
}

a:hover {
  letter-spacing: 2px;
}

Effet 3 (Lien 7, 8 et 9):


Lorsque la souris passe sur le lien, il y aura une bordure en bas de 3 pixels foncées. L'effet s'adapte à l'arrière plan, peu importe la couleur.
Compatible HTTPS.
Le CSS à appliquer:

Code:
a {
  color: #fff; /* Remplacez le #fff par la couleur du lien souhaitée. Ex: #000 = Noir, #FF0000 = Rouge */
  transition: all 150ms ease-in;
  padding-bottom: 5px;
  background-image: url(https://i37.servimg.com/u/f37/19/58/79/45/ca-lin10.png);
  background-repeat: no-repeat;
  background-position: -2px calc(100% + 3px);
}

a:hover {
  background-repeat: repeat-x;
  background-position: 100% 100%;
  background-size: 1px;
}

Effet 4 (Lien 10, 11 et 12):


Lorsque la souris passe sur le lien, il y aura une bordure en bas de 3 pixels claire. L'effet s'adapte à l'arrière plan, peu importe la couleur.
Compatible HTTPS.
Le CSS à appliquer:

Code:
a {
  color: #fff; /* Remplacez le #fff par la couleur du lien souhaitée. Ex: #000 = Noir, #FF0000 = Rouge */
  transition: all 150ms ease-in;
  padding-bottom: 5px;
  background-image: url(https://i37.servimg.com/u/f37/19/58/79/45/bgh10.png);
  background-repeat: no-repeat;
  background-position: -2px calc(100% + 3px);
}

a:hover {
  background-repeat: repeat-x;
  background-position: 100% 100%;
  background-size: 1px;
}

Le CSS de votre forum se trouve dans le Panneau d'administration :

Affichage

Images et Couleurs

Couleurs

Feuille de style CSS



Merci d'avoir vu mon libre-service,
Laiorm


avatar
Ajesto
Fondateur
Fondateur

Messages : 115 Masculin Points : 3

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum