Le code :
<button>
<span>Bouton</span>
<div class="liquid"></div>
</button>
*,*::before,*::after{box-sizing: border-box}
button{
font-family:system-ui;
border: none;
position: relative;
padding: 20px 0;
width: 200px;
overflow:hidden;
border-radius: 40px;
display:flex;
justify-content: center;
cursor: pointer;
}
button span {
position: relative;
color: #fff;
font-size: 1.25rem;
z-index: 1;
}
.liquid::after {
border-radius: 40%;
animation: bouton 10s linear infinite;
}
.liquid::after,
.liquid::before {
content: '';
width: 200%;
height: 200%;
position: absolute;
top: 0%;
left: 50%;
transform:translatex(-50%);
background:rgb(95, 76, 216);
}
.liquid::before {
border-radius: 45%;
background:rgba(103, 83, 234, 0.6);
animation: bouton 5s linear infinite;
}
.liquid {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: rgba(103, 83, 234, 0.8);
transition: .5s;
}
button:focus .liquid,
button:hover .liquid {
top: -60px;
}
@keyframes bouton{
0% {
transform: translate(-50%,-75%) rotate(0);
}
100% {
transform: translate(-50%,-75%) rotate(1turn);
}
}