Dernière mise à jour : novembre 2022
Le code :
<div class="bordure-anim">
<a href="#!">Passez votre souris
<span></span>
<span></span>
</a>
</div>
<div class="bordure-anim1">
<a href="#!">Passez votre souris
<span></span>
</a>
</div>
*,*::before,*::after{box-sizing: border-box}
/***********exemple 1*****************/
.bordure-anim a {
text-decoration: none;
border: 1px solid #6753ea;
display: grid;
place-items: center;
font-size: 1.25rem;
width: 100%;
max-width: 300px;
margin: 2rem auto;
position: relative;
height: 80px;
}
.bordure-anim span:first-of-type {
width: 100%;
height: 100%;
position: absolute;
top: -1px;
}
.bordure-anim span:first-of-type::before {
position: absolute;
content: '';
opacity: 0;
border-top: solid 2px #6753ea;
border-left: solid 2px #6753ea;
right: 50%;
}
.bordure-anim span:first-of-type::after {
position: absolute;
content: '';
opacity: 0;
border-top: solid 2px #6753ea;
border-right: solid 2px #6753ea;
left: 50%;
}
.bordure-anim a:hover span:first-of-type::before,
.bordure-anim a:hover span:first-of-type::after {
opacity: 1;
animation: bordure .4s forwards;
}
.bordure-anim a:hover span:last-of-type:before,
.bordure-anim a:hover span:last-of-type:after {
opacity: 1;
animation: bordure-bas .4s .4s forwards ;
}
.bordure-anim span:last-of-type {
width: 100%;
left:0;
top:0;
position: absolute;
}
.bordure-anim span:last-of-type::before {
position: absolute;
content: '';
opacity: 0;
height:80px;
border-bottom: solid 2px #6753ea;
right: 0;
}
.bordure-anim span:last-of-type::after {
position: absolute;
content: '';
opacity: 0;
height:80px;
border-bottom: solid 2px #6753ea;
left: 0;
}
@keyframes bordure {
0% {
width: 0;
height: 0;
}
50% {
width: 50%;
height: 0;
}
100% {
width: 150px;
height: 80px;
}
}
@keyframes bordure-bas {
from {
width: 0;
}
to {
width: 50%;
}
}
/***********exemple 2*****************/
.bordure-anim1 a {
text-decoration: none;
border: 1px solid #6753ea;
display: grid;
place-items: center;
font-size: 1.25rem;
width: 100%;
max-width: 300px;
margin: 2rem auto;
position: relative;
height: 80px;
}
.bordure-anim1 span:first-of-type{
width: 100%;
height: 100%;
position: absolute;
top: -1px;
}
.bordure-anim1 span::before {
position: absolute;
content: '';
opacity: 0;
border-top: solid 2px #6753ea;
border-right: solid 2px #6753ea;
}
.bordure-anim1 span::after {
position: absolute;
content: '';
opacity: 0;
border-bottom: solid 2px #6753ea;
border-left: solid 2px #6753ea;
bottom:-2px;
right:0;
}
.bordure-anim1 a:hover span::before{
opacity:1;
animation: bordure1 .4s forwards ;
}
.bordure-anim1 a:hover span::after{
opacity:1;
animation: bordure1 .4s .4s forwards ;
}
@keyframes bordure1 {
0% {
width: 0;
height: 0;
}
50% {
width: 100%;
height: 0;
}
100% {
width: 300px;
height: 80px;
}
}