<!DOCTYPE html>
<body>
<label class="btn"><input type="checkbox" class="cht" />Sign up</label>
</body>
<style>
.btn {
transition: all 0.25s ease;
}
.btn :checked {
color:red;
border-bottom: solid 2px #1059ff;
padding-bottom: 10px;
}
</style>
</html>
<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;}