Tombol On Off
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>*{
margin: 0;
padding: 0;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: black;
color: white;
}
.content{
position: relative;
display: inline-block;
width: 250px;
height: 80px;
}
input{
visibility: hidden;
}
.slider{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: pointer;
background: grey;
box-shadow: rgba(0,0,0,0.17) 0px -23px 25px 0px inset,
rgba(0,0,0,0.15) 0px -36px 30px 0px inset,
rgba(0,0,0,0.1) 0px -79px 40px 0px inset,
rgba(0,0,0,0.06) 0px 2px 1px,
rgba(0,0,0,0.09) 0px 4px 2px,
rgba(0,0,0,0.09) 0px 8px 4px,
rgba(0,0,0,0.09) 0px 16px 8px,
rgba(0,0,0,0.09) 0px 32px 16px;
border-radius: 50px;
}
.slider::before{
position: absolute;
content: "";
width: 65px;
height: 65px;
background: #fff;
left: 4px;
bottom: 7px;
border-radius: 50%;
-webkit-transition: 0.3s;
transition: 0.3s;
box-shadow: rgba(0,0,0,0.17) 0px -23px 25px 0px inset,
rgba(0,0,0,0.15) 0px -36px 30px 0px inset,
rgba(0,0,0,0.1) 0px -79px 40px 0px inset,
rgba(0,0,0,0.06) 0px 2px 1px,
rgba(0,0,0,0.09) 0px 4px 2px,
rgba(0,0,0,0.09) 0px 8px 4px,
rgba(0,0,0,0.09) 0px 16px 8px,
rgba(0,0,0,0.09) 0px 32px 16px;
}
#switch:checked + .slider{
background: grey;
}
#switch:checked + .slider::before{
transform: translateX(177px);
}
h1{
display: flex;
justify-content: center;
align-items: center;
min-height: 100%;
}
.background_color{
background: green;
width: 100vw;
height: 100vh;
}</style>
</head>
<body>
<div class="wrapper">
<label for="switch" class="content">
<input type="checkbox" id="switch">
<span class="slider"><h1>OFF</h1></span>
</label>
</div>
<script> const h1 = document.querySelector('h1')
const toggleSwitch = document.getElementById('switch')
toggleSwitch.addEventListener('click', ()=>{
if(h1.innerHTML === "OFF"){
h1.innerHTML = "ON"
}
else{
h1.innerHTML = "OFF"
}
var element = document.body
element.classList.toggle('background_color')
})</scrip>
</body>
</html>
0 komentar: