Dernière mise à jour : juin 2022
Cliquez/touchez le bouton ci-dessous :
Le code :
<button class=button>Envoyer</button>
.button{
outline: none;
position: relative;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
transition: clip-path 1s ease-in-out;
background: #6753ea;
overflow: hidden;
clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 0% 0%, 0% 0%);
color: white;
border: none;
display: flex;
align-items: center;
margin: 2rem auto;
font-size: 2rem;
font-family: inherit;
padding:1rem 2rem;
text-transform: uppercase
}
.button:focus{
clip-path:polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%)
}
.button span{
transition: transform .4s .2s;
will-change: transform
}
.button:focus span{
transform: translateX(200%)
}
.button:focus{
clip-path:polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%)
}
.button::before{
content: '';
background: rgba(255, 255, 255, 0.2);
height: 100%;
width: 100%;
z-index: -1;
filter: blur(1px);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
clip-path: circle(0% at 50% 50%);
transition:1s;
}
.button:hover::before,
.button:focus::before{
clip-path: circle(100% at 50% 50%);
}
.button::after{
content: '';
background: inherit;
height: 50%;
width: 100%;
z-index: -1;
position: absolute;
bottom: 0;
left: 0;
clip-path: inset(100% 0% 0% 0% );
transition: 1s .4s
}
.button:focus::after{
clip-path: inset(0 0 0 0);
}