![]()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
label{
display:block;
width:120px;
height:40px;
margin:0 auto;
border-radius:10px;
font-size:40px;
line-height: 32px;
box-shadow: 5px 0px 20px rgba(0,0,0,0.5);
padding:0 15px;
box-sizing: border-box;
position:relative;
background:#02d137;
color:#fff;
transition: all 0.2s;
}
span:nth-of-type(1){
float:left;
}
span:nth-of-type(2){
position: absolute;
top:0;
left:30px;
font-size:32px;
line-height:35px;
transition: all 0.2s;
}
input:checked+label>span:nth-of-type(2){
left:80px;
}
span:nth-of-type(3){
float:right;
}
input{
display:none;
}
input:checked+label{
box-shadow: -5px 0px 20px rgba(0,0,0,0.5);
background:#ff3838;
}
</style>
</head>
<body>
<input type="checkbox" id="active">
<label for="active">
<span>:</span>
<span>)</span>
<span>:</span>
</label>
</body>
</html>
