CSS Cinema Button
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>page</title>
<link rel="stylesheet" type="text/css" href="checkbox-9.css">
</head>
<body>
<label>
<input type="checkbox" name="">
<span class="check"></span>
<span class="text on">ON</span>
<span class="text off">OFF</span>
</label>
</body>
</html>CSS CODE:
body{
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: sans-serif;
background-color: #000;
}
label{
position:relative;
}
label input[type="checkbox"]{
opacity: 0;
display: none;
}
label input[type="checkbox"]:checked ~ .check{
border-color: #fff
}
.check{
display: block;
width: 40px;
height: 20px;
border:1px solid #222;
border-radius: 40px;
margin-right: 2px;
transition: .5s;
}
.check:before{
content: "";
position: absolute;
width: 20px;
height: 20px;
border:2px solid #000;
box-sizing: border-box;
transition: .5s;
box-shadow: inset 0 0 0 1px #222;
border-radius: 50%;
}
label input[type="checkbox"]:checked ~ .check:before{
box-shadow: inset 0 0 0 1px #fff;
background-color: #fff;
transform:translateX(20px);
}
.text{
display: block;
position: absolute;
top: 0;
right: -40px;
width: 40px;
font-size: 20px;
transition: .5s;
font-weight: bold;
color: #222;
}
.text.on{
transform: translateY(20px);
opacity: 0;
}
label input[type="checkbox"]:checked ~ .text.on{
transform: translateY(0px);
opacity: 1;
color: #fff;
}
.text.off{
transform: translateY(0px);
opacity: 1;
}
label input[type="checkbox"]:checked ~ .text.off{
transform: translateY(-20px);
opacity: 0;
}
Advertisements
