How to Make Light / Dark Buttons on HTML CSS JS Websites
Table of Contents [Show]
Ok let's get started
Create files named index.html and style.css
NOTE: The explanation is already in the code, so friends can understand it more easily
We open index.html
<!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>toggle button</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- We create id toggle -->
<div id="toggle">
<!-- We create class indicator -->
<i class="indicator"></i>
</div>
<script>
// we call elements body and toggle
const body = document.querySelector('body');
const toggle = document.getElementById("toggle");
// when we click the toggle it will add a class called active
// which active we will use in css
toggle.onclick = function() {
toggle.classList.toggle('active');
body.classList.toggle('active');
}
</script>
</body>
</html>
Then we create style.css
body {
/* Use layout flex */
display: flex;
/* automatically he will be in the middle */
justify-content: center;
align-items: center;
/* min high 100 vh */
min-height: 100vh;
/* background black */
background: #2b2b2b;
}
/* we create a button by calling id */
#toggle {
/* position relation so that it can be moved - moved */
position: relative;
display: block;
/* let's make the button 320 px wide */
width: 320px;
/* let's make the length 160px */
height: 160px;
/* border radius we make the edges curved, if not using
The border radius will become square later, you can try it yourself */
border-radius: 160px;
/* we make the background black */
background: #222;
/* transition when we click on it there will be a delay of 0.5 s so it's not direct
it's such a fast movement */
transition: 0.5s;
/* cursor pointer, when we touch our pointer / mouse we become an index image */
cursor: pointer;
/* You can tinker with the shadows on the box yourself, the thickness, the opacity
you can change it to see how it works */
box-shadow: inset 0 8px 60px rgba(0, 0, 0, 0.1),
inset 0 8px 8px rgba(0, 0, 0, 0.1), inset 0 -4px 4px rgba(0, 0, 0, 0.1);
}
/* when we click the button it will change to white */
body.active {
background: #f8f8f8;
}
/* when we click the active toggle, the background on the button will change to white*/
#toggle.active {
/* The button background will change to white */
background: #fff;
/* the shadow on the button will turn gray, you can tinker with yourself,
as you like to know the right color */
box-shadow: inset 0 2px 60px rgba(0, 0, 0, 0.1),
inset 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 -4px 4px rgba(0, 0, 0, 0.05);
}
/* we make a circle inside the button*/
#toggle .indicator {
position: absolute;
top: 0;
left: 0;
/* width and height*/
width: 160px;
height: 160px;
background: linear-gradient(to bottom, #444, #222);
/*border radius 50% so it will turn round */
border-radius: 50%;
transform: scale(0.9);
/* round shadow or you could say the edges */
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5),
inset 0 4px 4px rgba(255, 255, 255, 0.2),
inset 0 -4px 4px rgba(255, 255, 255, 0.2);
/* when clicked it will delay a little*/
transition: 0.5s;
}
/* when clicked the circle will turn white */
#toggle.active .indicator {
/* when we click then the circle will move to the right because
we use left: 160px; / try to increase the size later it will even further away, you have to try */
left: 160px;
/* let's make the background */
background: linear-gradient(to bottom, #eaeaea, #f9f9f9);
/* we also use the shadow box boy */
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1),
inset 0 4px 4px rgba(255, 255, 255, 1),
inset 0 -4px 4px rgba(255, 255, 255, 1);
}
OK, the result is as below..
You can try the results here
If you are confused, you can ask in the comments...!!
0 Comments