Effets sur les liens lors du passage de la souris
Page 1 sur 1
Effets sur les liens lors du passage de la souris
par Ajesto Jeu 19 Jan - 21:30
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.
Le CSS est à mettre dans votre feuille de style.
Merci d'avoir vu mon libre-service,
Laiorm
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.
- 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 est à mettre dans votre feuille de style.
Merci d'avoir vu mon libre-service,
Laiorm
Ajesto- Fondateur
- Messages : 115
Points : 3
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum|
|
|