Hello wizards, I hope you are doing great. Today in this blog you’ll learn how to create the "Toggle Button Light/Dark Mode" project using HTML & CSS.
Preview
In the above video, you’ve seen the preview of the "Toggle Button Light/Dark Mode" project and I hope you are now able to create this type of project. If not, I have provided all the HTML & CSS code below.
Toggle Button Light/Dark Mode [Source Code]
To get the following HTML & CSS code for the Toggle Button Light/Dark Mode project. You need to create two files one is an HTML file, and the second one is a CSS file. After completing these two files, you can copy-paste the codes on your document.
Remember, you’ve to create a file with a .html extension for HTML code and a .css extension for CSS code.
You can also download all source code files from the given download button.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Toggle Button Light/Dark Mode</title> <link rel="stylesheet" href="style.css"> </head> <body> <input type="checkbox" id="darkMode"> <h1>Toggle Button Light/Dark Mode</h1> <label for="darkMode"></label> <div class="bg"></div> </body> </html>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100vh; } h1 { margin-bottom: 20px; } label { width: 480px; height: 180px; display: block; background: white; border-radius: 100px; cursor: pointer; box-shadow: inset 0px 0px 40px rgba(0, 0, 0, 0.9); position: relative; } label:after { content: ""; height: 160px; width: 160px; background: black; border-radius: 100px; position: absolute; top: 10px; left: 10px; transition: 1s; } input { display: none; } input:checked ~ label { background: black; box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.9); } input:checked ~ label:after { background-color: white; left: 310px; } .bg { background: white; position: absolute; width: 100%; height: 100vh; z-index: -99; transition: 1s; } input:checked ~ .bg { background: black; } input:checked ~ h1 { color: white; }