<label class="btn"><input type="checkbox" class="cht" /><span></span>Sign up</label>.btn {
overflow:hidden;
position:relative;
}
.btn input {
visibility: hidden;
position:absolute;
left:-100%;
}
.btn span {
display:inline-block;
position: relative;
width:32px;
height:32px;
border: 1px solid red;
margin-right:8px;
}
.btn span:before {
content:"";
transition: all 0.25s ease;
opacity:0;
position: absolute;
background-color: red;
width:16px;
height:16px;
left: 8px;
top:8px;
}
.btn input:checked + span:before {opacity:1;}clip-path: path('M1,0.496 v0.008 C0.998,0.778,0.798,1,0.553,1 C0.361,1,0,0.863,0,0.675 c0,-0.055,0.031,-0.114,0.105,-0.175 c0.159,-0.13,0.211,-0.251,0.25,-0.341 C0.398,0.062,0.425,0,0.553,0 C0.798,0,0.998,0.222,1,0.496 Z');