Hello Guys! Welcome to Coding Torque. In this blog, I’m going to explain to you how to make Dark Mode Toggle Button using HTML, CSS and JavaScript. You can simply use this button to make your website super cool. This will be a step-by-step guide. Let’s get started 🚀.
Before we start, here are some JavaScript Games you might like to create:
1. Snake Game using JavaScript
2. 2D Bouncing Ball Game using JavaScript
3. Rock Paper Scissor Game using JavaScript
4. Tic Tac Toe Game using JavaScript
5. Whack a Mole Game using JavaScript
I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.
HTML CodeÂ
Starter Template
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dark Mode Toggle Button using HTML and CSS - @codingtorque</title>
</head>
<body>
<!-- Further code here -->
</body>
</html>
Paste the below code in your <body> tag
<div class="toggle toggle--daynight"> <input type="checkbox" id="toggle--daynight" class="toggle--checkbox"> <label class="toggle--btn" for="toggle--daynight"><span class="toggle--feature"></span></label> </div>
CSS CodeÂ
Create a file style.css and paste the code below.
*,
*::before,
*::after {
box-sizing: border-box;
}
/* =====================================================
Some defaults across all toggle demos
===================================================== */
.toggle {
display: block;
text-align: center;
margin-top: 40px;
user-select: none;
}
.toggle--checkbox {
display: none;
}
.toggle--btn {
display: block;
margin: 0 auto;
font-size: 1.4em;
transition: all 350ms ease-in;
&:hover {
cursor: pointer;
}
}
.toggle--btn,
.toggle--checkbox,
.toggle--feature {
&,
&:before,
&:after {
transition: all 250ms ease-in;
}
&:before,
&:after {
content: '';
display: block;
}
}
$toggleHeight: 70px;
$toggleWidth: 125px;
$borderWidth: 5px;
$toggleBtnRadius: $toggleHeight - 14px;
$bgColor--night: #3c4145;
$borderColor--night: #1c1c1c;
$toggleBtn-bgColor--night: #fff;
$toggleBtn-borderColor--night: #e3e3c7;
$bgColor--day: #9ee3fb;
$borderColor--day: #86c3d7;
$toggleBtn-bgColor--day: #ffdf6d;
$toggleBtn-borderColor--day: #e1c348;
$cloud-borderColor: #d3d3d3;
$cloud-bgColor: #fff;
.toggle--daynight,
.toggle--like {
.toggle--btn {
position: relative;
height: $toggleHeight;
width: $toggleWidth;
border-radius: $toggleHeight;
//toggle button
&:before {
position: absolute;
top: 2px;
left: 4px;
width: $toggleBtnRadius;
height: $toggleBtnRadius;
border-radius: 50%;
}
}
}
.toggle--daynight {
.toggle--btn {
border: $borderWidth solid $borderColor--night;
background-color: $bgColor--night;
//toggle button
&:before {
background-color: $toggleBtn-bgColor--night;
border: $borderWidth solid $toggleBtn-borderColor--night;
}
&:after {
position: absolute;
top: 62%;
left: $toggleWidth - ($toggleBtnRadius) - ($borderWidth * 2) - 20px;
z-index: 10;
width: $toggleBtnRadius / 5;
height: $toggleBtnRadius / 5;
opacity: 0;
background-color: $cloud-bgColor;
border-radius: 50%;
//crazy ass box-shadow to make the cloud
box-shadow: $cloud-bgColor 0 0,
$cloud-bgColor 3px 0,
$cloud-bgColor 6px 0,
$cloud-bgColor 9px 0,
$cloud-bgColor 11px 0,
$cloud-bgColor 14px 0,
$cloud-bgColor 16px 0,
$cloud-bgColor 21px -1px 0 1px,
$cloud-bgColor 16px -7px 0 -2px,
$cloud-bgColor 7px -7px 0 1px,
$cloud-borderColor 0 0 0 4px,
$cloud-borderColor 6px 0 0 4px,
$cloud-borderColor 11px 0 0 4px,
$cloud-borderColor 16px 0 0 4px,
$cloud-borderColor 21px -1px 0 5px,
$cloud-borderColor 16px -7px 0 1px,
$cloud-borderColor 7px -7px 0 5px;
transition: opacity 100ms ease-in;
}
}
@keyframes starry_star {
50% {
background-color: rgba(255,255,255,0.1);
box-shadow: #fff 30px -3px 0 0,
#fff 12px 10px 0 -1px,
rgba(255,255,255,0.1) 38px 18px 0 1px,
#fff 32px 34px 0 0,
rgba(255,255,255,0.1) 20px 24px 0 -1.5px,
#fff 5px 38px 0 1px;
}
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(.3);
}
50% {
opacity: 100;
transform: scale(1.1);
}
55% {
transform: scale(1.1);
}
75% {
transform: scale(.9);
}
100% {
opacity: 100;
transform: scale(1);
}
}
//stars
.toggle--feature {
display: block;
position: absolute;
top: 9px;
left: 52.5%;
z-index: 20;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #fff;
box-shadow: rgba(255,255,255,0.1) 30px -3px 0 0,
rgba(255,255,255,0.1) 12px 10px 0 -1px,
#fff 38px 18px 0 1px,
rgba(255,255,255,0.1) 32px 34px 0 0,
#fff 20px 24px 0 -1.5px,
rgba(255,255,255,0.1) 5px 38px 0 1px;
animation: starry_star 5s ease-in-out infinite;
&:before {
position: absolute;
top: -2px;
left: -25px;
width: 18px;
height: 18px;
background-color: $toggleBtn-bgColor--night;
border-radius: 50%;
border: 5px solid $toggleBtn-borderColor--night;
box-shadow: $toggleBtn-borderColor--night -28px 0 0 -3px,
$toggleBtn-borderColor--night -8px 24px 0 -2px;
transform-origin: -6px 130%;
}
}
//what happens once checkbox is checked
.toggle--checkbox:checked {
& + .toggle--btn {
background-color: $bgColor--day;
border: $borderWidth solid $borderColor--day;
&:before {
left: $toggleWidth - ($toggleBtnRadius) - ($borderWidth * 2) - 4px;
background-color: $toggleBtn-bgColor--day;
border: $borderWidth solid $toggleBtn-borderColor--day;
}
&:after {
opacity: 100;
animation-name: bounceIn;
animation-duration: 0.60s;
animation-delay: 0.10s;
animation-fill-mode: backwards;
animation-timing-function: ease-in-out;
}
> .toggle--feature {
opacity: 0;
box-shadow: rgba(255,255,255,0.1) 30px -3px 0 -4px,
rgba(255,255,255,0.1) 12px 10px 0 -5px,
#fff 38px 18px 0 -3px,
rgba(255,255,255,0.1) 32px 34px 0 -4px,
#fff 20px 24px 0 -5.5px,
rgba(255,255,255,0.1) 5px 38px 0 -3px;
animation: none;
&:before {
left: 25px;
transform: rotate(70deg);
}
}
}
}
}Output Till Now
Written by: Piyush Patil
Code Credits:Â @xmjol
If you have any doubts or any project ideas feel free to Contact Us
Hope you find this post helpful💖
