Bouton transition CSS clip-path


✔️ Support navigateurs :

Can I Use css-clip-path? Data on support for the css-clip-path feature across the major browsers from caniuse.com.



<button>Envoyer</button>




button{
	
position:relative;
-webkit-appearance:none;
cursor: pointer;
transition: clip-path 1s ease-in-out;
background:linear-gradient(to right,#7A5FFF,#01FF89);
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 3rem;
text-transform: uppercase 
	
	}
	
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, .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);
	
}