Power On Off Neumorphism Button Using HTML And CSS Only | Coding With Roannie
Source Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body{
margin: 0;
padding: 0;
background-color: #ececec;
display: flex;
justify-content: center;
align-items: center;
}
input[type="checkbox"]{
-webkit-appearance: none;
width: 250px;
height: 250px;
border-radius: 50%;
box-shadow:
-10px -10px 15px rgba(255, 255, 255, 0.5),
10px 10px 15px rgba(70, 70, 70, 0.12);
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%,-50%);
border: 8px solid #ececec;
outline: none;
cursor: pointer;
}
input[type="checkbox"]::after{
font-family: FontAwesome;
content: '\f011';
font-size: 70px;
position: absolute;
top: 37.5%;
left: 39%;
color: rgb(221, 25, 25);
text-shadow: 1px 1px 10px rgb(221, 25, 25);
}
input[type="checkbox"]:checked{
box-shadow:-10px -10px 15px rgba(255, 255, 255, 0.5),
10px 10px 15px rgba(70, 70, 70, 0.12),
inset -10px -10px 15px rgba(255, 255, 255, 0.5),
inset 10px 10px 15px rgba(70, 70, 70, 0.12);
}
input[type="checkbox"]:checked:after{
color: rgb(37, 202, 78);
text-shadow: 1px 1px 10px rgb(37, 202, 78);
}
</style>
</head>
<body>
<div>
<input class="checkbox" type="checkbox" >
</div>
<script>
let checkbox = document.getElementsByClassName("checkbox");
if(checkbox){
checkbox.innerHTML = "<h1> Power On </h1>"
}
else{
}
</script>
</body>
</html>
Subscribe On YouTube
Thanks For Visiting