Partagez cette démonstration :
Transitions liens hypertexte
Dernière mise à jour : octobre 2022
Transitions avec le positionnement CSS :
<div class=cadre-demo>
<a class=position-1 href="#!">Lien hypertexte</a>
<a class=position-2 href="#!">Lien hypertexte</a>
<a class=position-3 href="#!">Lien hypertexte</a>
<a class=position-4 href="#!">Lien hypertexte</a>
<a class=position-5 href="#!">Lien hypertexte</a>
<a class=position-6 href="#!">Lien hypertexte</a>
</div>
*,
*::before,
*::after {
box-sizing: border-box;
}
.cadre-demo a{
display: inline-block;
font-size: 2rem;
text-decoration: none;
color:currentColor;
position: relative;
}
a::before,
a::after {
content: '';
position: absolute;
transition: width .4s ease-in
}
/*demo 1*/
.position-1::after{bottom:-0.25em;left:0;height:.25rem;width:0;background:#6753ea }
.position-1:hover::after{width:100%}
/*demo 1*/
/*demo 2*/
.position-2::after{bottom:-0.25em;right:0;height:.25rem;width:0;background:#6753ea }
.position-2:hover::after{width:100%}
/*demo 2*/
/*demo 3*/
.position-3::before{bottom:-0.25em;left:50%;height:.25rem;width:0;background:#6753ea }
.position-3::after{bottom:-0.25em;right:50%;height:.25rem;width:0;background:#6753ea }
.position-3:hover::before,.position-3:hover::after{width:50%}
/*demo 3*/
/*demo 4*/
.position-4::before{bottom:-0.25em;left:0;height:.25rem;width:0;background:#6753ea }
.position-4::after{bottom:-0.25em;right:0;height:.25rem;width:0;background:#6753ea }
.position-4:hover::before,.position-4:hover::after{width:50%}
/*demo 4*/
/*demo 5*/
.position-5::before{bottom:-0.25em;left:0;height:.25rem;width:100%;background:#6753ea }
.position-5::after{bottom:-0.25em;left:0;height:.25rem;width:0;background:#3cddc4 }
.position-5:hover::after{width:100%}
/*demo 5*/
/*demo 6*/
.position-6::before{bottom:-0.25em;left:0;height:.25rem;width:100%;background:#6753ea }
.position-6::after{bottom:-0.25em;right:0;height:.25rem;width:0;background:#3cddc4 }
.position-6:hover::after{width:100%}
/*demo 6*/
Transitions avec les transformations CSS :
<div class=cadre-demo>
<a class=transform-1 href="#!">Lien hypertexte</a>
<a class=transform-2 href="#!">Lien hypertexte</a>
<a class=transform-3 href="#!">Lien hypertexte</a>
<a class=transform-4 href="#!">Lien hypertexte</a>
<a class=transform-5 href="#!">Lien hypertexte</a>
<a class=transform-6 href="#!">Lien hypertexte</a>
</div>
*,
*::before,
*::after {
box-sizing: border-box;
}
.cadre-demo a {
display: inline-block;
font-size: 2rem;
text-decoration: none;
color:currentColor;
position: relative;
}
a::before,
a::after {
content: '';
position: absolute;
transition: transform .4s ease-in
}
/*demo 1*/
.transform-1::after{bottom:-0.25em;left:0;right:0;height:.25rem;background-color: #6753ea;transform: scaleX(0);transform-origin:bottom left;}
.transform-1:hover::after{transform: scaleX(1);}
/*demo 1*/
/*demo 2*/
.transform-2::after{bottom:-0.25em;left:0;right:0;height:.25rem;background-color: #6753ea;transform: scaleX(0);transform-origin:bottom right;}
.transform-2:hover::after{transform: scaleX(1);}
/*demo 2*/
/*demo 3*/
.transform-3::after{bottom:-0.25em;left:0;right:0;height:.25rem;background-color: #6753ea;transform: scaleX(0);}
.transform-3:hover::after{transform: scaleX(1);}
/*demo 3*/
/*demo 4*/
.transform-4::before{bottom:-0.25em;left:0;right:50%;height:.25rem;background-color: #6753ea;transform: scaleX(0);transform-origin:bottom left;}
.transform-4::after{bottom:-0.25em;left:50%;right:0;height:.25rem;background-color: #6753ea;transform: scaleX(0);transform-origin:bottom right;}
.transform-4:hover::before,.transform-4:hover::after{transform: scaleX(1);}
/*demo 4*/
/*demo 5*/
.transform-5::before{bottom:-0.25em;left:0;right:0;height:.25rem;background-color: #6753ea;}
.transform-5::after{bottom:-0.25em;left:0;right:0;height:.25rem;background-color: #3cddc4;transform: scaleX(0);transform-origin:bottom left;}
.transform-5:hover::after{transform: scaleX(1);}
/*demo 5*/
/*demo 6*/
.transform-6::before{bottom:-0.25em;left:0;right:0;height:.25rem;background-color: #6753ea;}
.transform-6::after{bottom:-0.25em;left:0;right:0;height:.25rem;background-color: #3cddc4;transform: scaleX(0);transform-origin:bottom right;}
.transform-6:hover::after{transform: scaleX(1);}
/*demo 6*/
Transitions avec les propriétés de fond :
<div class=cadre-demo>
<a class=transition-bg-1 href="#!">Lien hypertexte</a>
<a class=transition-bg-2 href="#!">Lien hypertexte</a>
<a class=transition-bg-3 href="#!">Lien hypertexte</a>
<a class=transition-bg-4 href="#!">Lien hypertexte</a>
<a class=transition-bg-5 href="#!">Lien hypertexte</a>
<a class=transition-bg-6 href="#!">Lien hypertexte</a>
</div>
*,
*::before,
*::after {
box-sizing: border-box;
}
.cadre-demo a {
display: inline-block;
padding-bottom:.25rem;
--taille:.25rem;
--degrade:linear-gradient(#6753ea,#6753ea) no-repeat;
font-size: 2rem;
text-decoration: none;
color:currentColor
}
.transition-bg-1{
background: var(--degrade) 50% 100% / var(--a, 0) var(--taille);
transition: background-size 0.4s;
}
.transition-bg-2 {
background: var(--degrade) 0% 100% / var(--a, 0) var(--taille);
transition: background-size 0.4s;
}
.transition-bg-3 {
background: var(--degrade) calc(100% - var(--a,0%)) 100%/ var(--a, 0) var(--taille);
transition: background-size 0.4s;
}
.transition-bg-4 {
background: var(--degrade) var(--a,0) 100% / var(--a, 0) var(--taille);
transition: background-size 0.4s;
}
.transition-bg-1:hover,
.transition-bg-2:hover,
.transition-bg-3:hover,
.transition-bg-4:hover {
--a: 100%;
}
.transition-bg-5 {
background: var(--degrade) calc(-100% + var(--a, 0) * 100%) 100% /50% var(--taille),
var(--degrade) calc(200% - var(--a, 0) * 100%) 100% / 50% var(--taille);
transition: background-position-x .4s;
}
.transition-bg-5:hover{
--a: 1;
}
.transition-bg-6 {
background: var(--degrade) calc(-100% + var(--a, 1) * 100%) 100% /50% var(--taille),
var(--degrade) calc(200% - var(--a, 1) * 100%) 100% / 50% var(--taille);
transition: background-position-x .4s;
}
.transition-bg-6:hover{
--a: 0;
}
Transitions avec CSS Grid et la propriété gap
<div class="cadre-demo">
<a class="grid-gap-1" href="#!"><span>Lien hypertexte</span></a>
<a class="grid-gap-2" href="#!"><span>Lien hypertexte</span></a>
<a class="grid-gap-3" href="#!"><span>Lien hypertexte</span></a>
<a class="grid-gap-4" href="#!"><span>Lien hypertexte</span></a>
<a class="grid-gap-5" href="#!"><span>Lien hypertexte</span></a>
<a class="grid-gap-6" href="#!"><span>Lien hypertexte</span></a>
</div>
*,
*::before,
*::after {
box-sizing: border-box;
}
.cadre-demo a {
font-size: 2rem;
text-decoration: none;
color:currentColor;
transition: gap .4s;
display: inline-grid;
--color-bg:#6753ea;
}
.cadre-demo a span{padding:.25rem 0}
.grid-gap-1{grid:1fr .25rem/1fr;column-gap:100%;}
.grid-gap-1 span{grid-column:span 2;align-self:center}
.grid-gap-1::after{content: '';background-color:var(--color-bg)}
.grid-gap-1:hover{column-gap: 0%}
.grid-gap-2{overflow:hidden;row-gap:100%;grid:1fr .25rem/1fr;}
.grid-gap-2 span{align-self:center;}
.grid-gap-2::after{content: '';background-color:var(--color-bg)}
.grid-gap-2:hover{row-gap: 0%}
.grid-gap-3{column-gap:0;grid:1fr .25rem/1fr;}
.grid-gap-3 span{grid-column:span 2;align-self:center;}
.grid-gap-3::after{content: '';background-color:var(--color-bg);}
.grid-gap-3:hover{column-gap:100%}
.grid-gap-4 {column-gap:100%;grid:1fr .25rem/repeat(2,1fr)}
.grid-gap-4 span{grid-column: span 2;align-self:center}
.grid-gap-4::before{content: '';grid-row: 2;background-color:var(--color-bg)}
.grid-gap-4::after{content: '';background-color:var(--color-bg)}
.grid-gap-4:hover{column-gap: 0}
.grid-gap-5{column-gap:0;grid:.25rem 1fr .25rem/1fr}
.grid-gap-5 span{grid-column: span 2;align-self:center;}
.grid-gap-5::before{content: '';grid-row:1;background-color:var(--color-bg)}
.grid-gap-5::after{content: '';grid-row:3;background-color:var(--color-bg)}
.grid-gap-5:hover{column-gap: 100%;}
.grid-gap-6 {column-gap: 100%;grid:.25rem 1fr .25rem/1fr}
.grid-gap-6 span{grid-column:span 2;align-self:center}
.grid-gap-6::before{content:'';background-color:var(--color-bg)}
.grid-gap-6::after{content:'';background-color:var(--color-bg)}
.grid-gap-6:hover{ column-gap: 0}
Transition avec la propriété text-underline-offset
<a class=text-offset href="">Lien hypertexte</a>
@property --text-offset {
syntax: '<length>';
inherits: false;
initial-value: 0;
}
.text-offset {
font-size:1.5rem;
font-size: clamp(2rem, (2vw + 1rem), 3rem);
text-underline-offset: var(--text-offset);
--text-offset: 1rem;
text-decoration-line: none;
text-decoration-thickness:.25rem;
text-decoration-color: #6753ea;
transition: --text-offset .4s
}
.text-offset:hover,
.text-offset:focus {
--text-offset: .5rem;
text-decoration-line: underline;
}
@supports not (background: paint(something)) {
.text-offset {
transition: text-underline-offset .4s,
text-decoration-thickness .4s;
}
}
Télécharger les démonstrations :
Vous rencontrez un problème avec cette démonstration ?
Vous avez constaté un oubli ou une erreur dans le code ? N'hésitez pas à me le signaler par mail (contact@guyom-design.com). Vous ne parvenez pas à faire fonctionner la démonstration ? Vous pouvez également me contacter et je vous aiderai si je le peux.