Bring light & dark themes to your website with this amazing animated toggle button! This blog post shows you how to create a beautiful toggle button that transforms from a sun and clouds to a moon and stars, using only HTML and CSS. No JavaScript required! Learn the step-by-step process, from basic structure to smooth animations.
Video Tutorial on Animated Toggle Button:
Light and Dark theme Toggle Button Using HTML and CSS.
File structure:
- Create one folder.
- Open it in your code editor.
- Create two files in that folder with name index.html and index.css.
Steps to create the Light and Dark theme Toggle Button.
Step 1: Set up the basic structure.
Link the css file with the html file and add the basic html structure.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Light and Dark Theme Toggle Switch. | Maketechstuff.com</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
</body>
</html>
CSS
* {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
height: 100vh;
background-color: #fff;
position: relative;
}
Step 2: Design the Toggle Button in the "OFF" (Light Theme) State.
In this step, we'll craft the visual elements of the toggle button when it's in the "OFF" state, signifying the "light theme." Here, we'll incorporate both the sun and cloud icons to represent this mode. Let's dive in and create them!.
I've made sun and clouds with HTML, You can simply use images inside toggle button.
HTML
<div class="container">
<input type="checkbox" id="checkbox">
<label for="checkbox">
<!-- Circle that slides left and right to show toggle button state. -->
<div class="circle"></div>
<!-- light theme -->
<div class="light_theme">
<div class="sun"></div>
<div class="clouds">
<span class="cloud1"></span>
<span class="cloud2"></span>
<span class="cloud3"></span>
</div>
</div>
<!-- dark theme -->
</label>
</div>
CSS
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
padding: 15px;
}
label {
width: 250px;
height: 100px;
background-color: #3b92d9;
display: block;
border-radius: 100px;
margin: 0px auto;
cursor: pointer;
position: relative;
}
.circle {
position: absolute;
left: 0px;
top: 0px;
width: 90px;
height: 90px;
margin: 5px;
background-color: #fff;
border-radius: 100px;
transition: 0.5s;
}
/* ---------- light theme ---------- */
.light_theme {
transition: 0.5s;
}
.sun {
position: absolute;
width: 50px;
height: 50px;
background-color: yellow;
border-radius: 100px;
right: 80px;
top: 8px;
transition: 0.5s;
}
.clouds {
position: relative;
width: 100px;
height: 70px;
left: 120px;
top: 25px;
transition: 0.5s;
}
.cloud1 {
position: absolute;
bottom: 10px;
left: 5px;
width: 35px;
height: 35px;
background-color: #fff;
border-radius: 100px;
}
.cloud2 {
position: absolute;
bottom: 10px;
left: 20px;
width: 60px;
height: 50px;
background-color: #fff;
border-radius: 100px;
}
.cloud3 {
position: absolute;
bottom: 25px;
left: 60px;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 100px;
}
Output:
After finalising the design of the "OFF" state, let's add functionality to the toggle button.
When the user clicks the toggle button, the associated checkbox will be selected due to their binding through the label. Based on the checkbox state, we'll update the toggle button's appearance and behaviour.
When the checkbox is selected, we'll slide the toggle button's circle from left to right, hide the light theme elements (sun and clouds), and change the toggle button's colour to black.
We'll also add animations to the sun and clouds. When the checkbox is selected, these elements will slide: the sun downwards and the clouds to the left (even though they're currently hidden). This ensures that when the checkbox is unselected, the sun and clouds smoothly return to their original positions, creating a visually appealing animation.
CSS
/* To slide the circle right and left according to checkbox state. */
input[type="checkbox"]:checked+label .circle {
left: 150px;
}
/* Change the label (toggle button) background color */
input[type="checkbox"]:checked+label {
background-color: #000;
}
/* Hide the light theme when checkbox is selected. */
input[type="checkbox"]:checked+label .light_theme {
opacity: 0;
transition: 0.5s;
}
/* Change the sun position (slightly down) when checkbox is selected. So that it when checkbox is unselected it get its previous styles (look like rising sun.) */
input[type="checkbox"]:checked+label .light_theme .sun {
top: 40px;
}
/* Change the clouds position (slightly left) when checkbox is selected. So that it when checkbox is unselected it get its previous styles (look like clouds are moved.) */
input[type="checkbox"]:checked+label .light_theme .clouds {
left: 50px;
}
/* Hiding the checkbox */
input[type="checkbox"]{
display: none;
}
Step 3: Design a toggle button for dark mode.
When the toggle button is ON (activating dark mode), it should display a moon and three stars. Let's create this design! (we'll add dark theme code after the dark theme comment, I've made in above HTML code in step 2).
Initial State:
When the page loads and the checkbox is unchecked, the toggle button should be OFF and the light theme will be displayed. We need to hide the dark theme elements when the light theme is active.
Toggle Functionality:
The dark theme should only be visible when the checkbox is checked. This will activate the toggle button, switching to the dark theme.
Moon Animation:
We will also add an animation to the moon. When the checkbox is unchecked (light theme), the moon will be positioned slightly higher up. When the checkbox is checked (dark theme), the moon will move down slightly.
HTML
<div class="dark_theme">
<div class="moon"></div>
<span class="star1"></span>
<span class="star2"></span>
<span class="star3"></span>
</div>
CSS
/* Showing the dark theme when checkbox is selected. */
input[type="checkbox"]:checked+label .dark_theme {
opacity: 1;
transition: 0.5s;
}
/* Animating the moon when checkbox is selected or dark theme is visible */
input[type="checkbox"]:checked+label .dark_theme .moon {
top: 8px;
}
/* ---------- dark theme ---------- */
/* Hiding the dark theme. Only make it visible when checkbox is selected. */
.dark_theme {
opacity: 0;
transition: 0.5s;
}
/* Moon */
.moon {
position: absolute;
width: 50px;
height: 50px;
background-color: #fff;
border-radius: 100px;
left: 50px;
top: -20px;
transition: 0.5s;
}
.moon::after {
position: absolute;
content: "";
width: 10px;
height: 10px;
background-color: #f2f2f2;
border-radius: 100px;
left: 15px;
top: 10px;
}
.moon::before {
position: absolute;
content: "";
width: 15px;
height: 15px;
background-color: #f2f2f2;
border-radius: 100px;
left: 10px;
top: 25px;
}
/* Stars */
.star1,
.star2,
.star3 {
position: absolute;
width: 5px;
height: 5px;
background-color: #fff;
border-radius: 100px;
}
.star1 {
left: 30px;
top: 10px;
}
.star2 {
left: 120px;
top: 50px;
}
.star3 {
left: 20px;
top: 70px;
}
You can see demo in above youtube video.
Final code for Day/Night Toggle Button using HTML & CSS:
That's how to create a light and dark theme toggle button using just HTML and CSS. If you have any questions or suggestions, feel free to leave them in the comment section.
You may like:
- How to create a simple toggle switch using HTML & CSS.
- How to create a animated toggle button with CSS Keyframes.
- How to create a toggle button that use to change the styling of other HTML elements based on its state using HTML , CSS and JavaScript.
- How to create the animated checkboxes using HTML, CSS and JavaScript.
- Create a simple website page with light and dark mode and change the modes with toggle button.
- Create a function to select and unselect all checkboxes using JavaScript.
- How to create a animated radio button.
Share your thoughts.