Dernière mise à jour : novembre 2022
Voici plusieurs manières de réaliser l'effet pulsation afin de donner du dynamisme à vos boutons.
<button class="transform-pulse"><svg></svg></button>
<button class="clip-path-pulse"><svg></svg></button>
<button class="box-shadow-pulse"><svg></svg></button>
*,*::before,*::after{box-sizing: border-box;}
button{
all: unset;
cursor: pointer
}
button svg{
height: 5vmax;
aspect-ratio: 1;
}
/*************transformations*****************/
.transform-pulse>*{grid-area: bouton;}
.transform-pulse{
display: grid;
grid-template-areas: "bouton";
place-items:center;
border-radius:50%;
height:10vmax;
aspect-ratio:1;
background-color:#e64545;
}
.transform-pulse::before{
grid-area: bouton;
content:'';
z-index: -1;
will-change: transform,opacity;
transform: scale(1);
transition: 1s ease-out;
border-radius: inherit;
height: inherit;
aspect-ratio: 1;
background-color: inherit;
}
.transform-pulse:hover::before{
transform:scale(1.15);
opacity:0;
}
/*************clip path*****************/
.clip-path-pulse>*{grid-area: bouton;}
.clip-path-pulse{
display: grid;
grid-template-areas: "bouton";
place-items:center;
border-radius:50%;
height:10vmax;
aspect-ratio:1;
background-color:#e64545;
}
.clip-path-pulse::before{
grid-area: bouton;
content:'';
z-index:-1;
transition: 1s ease-out;
border-radius:inherit;
clip-path: circle(50% at 50% 50%);
height:100%;
aspect-ratio:1;
background:inherit;
}
.clip-path-pulse:hover::before{
opacity:0;
height:120%;
clip-path: inherit;
}
/*************box-shadow*****************/
.box-shadow-pulse{
display: grid;
place-items:center;
border-radius:50%;
height:10vmax;
aspect-ratio:1;
background-color:#e64545;
}
.box-shadow-pulse:hover{
animation:pulsation_bouton 1s ease-out
}
@keyframes pulsation_bouton {
from{
box-shadow:0 0 0 -3px #0000,0 0 0 0 #e64545
}
to{
box-shadow:0 0 0 10px #0000,0 0 0 15px #0000
}
}