Hi readers, Today in this blog you’ll learn how to create a Day - Night animated toggle button with the help of Html and CSS only. That change from day to night mode when user toggle this button and here we done this project with the CSS only instead of JavaScript or Jquery. Currently, on the internet there are lot's of Websites whhich have used this type of toggle icons for audience's comfort when they are visited on sites in different times.

To create this project just used HTML's checkbox attribute for react as toggle click and you can easily create and add this type of button for set dark and light mode in website or webpages for keep user's eye sight safe. This project can also be created with the help of javascript/jquery, but here CSS make it more easy as for beginners.

Watch Tutorial of Day - Night mode toggle checkbox using HTML & CSS

Now with this video, I'm sure you have understood the basics behind creating this program for those of you still finding it difficult I'll be linking the source code in the description for you.

HTML 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">
      <link rel="stylesheet" href="style.css">
      <title>Day - Night mode toggle checkbox using HTML & CSS</title>
  </head>
  <body>
      <label>
          <input type="checkbox">
          <div class="check"></div>
      </label>
  </body>
  </html>

CSS CODE:

  body{
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      transform: scale(5);
      overflow: hidden;
  }
  input[ type="checkbox"]{
      -webkit-appearance: none;
      visibility: hidden;
      display: none;
  }
  .check{
      display: block;
      height: 20px;
      width: 40px;
      background: #0a0a0a;
      border-radius: 20px;
      cursor: pointer;
      transition: ease-in 0.3s;
      overflow: hidden;
      position: relative;
  }
  input[ type="checkbox"]:checked ~ .check{
      background: white;
      box-shadow: 0 0 0 12000px #0a0a0a;
  }
  .check:before{
      content: '';
      display: block;
      position: absolute;
      height: 16px;
      width: 16px;
      background: #878686;
      border-radius: 50%;
      top: 2px;
      left: 2px;
      transition: 0.5s;
  }
  input[ type="checkbox"]:checked ~ .check:before{
      background: #01f4fd;
      position: absolute;
      transform: translateX(20px);
  }

Note : This given Download button link may contains some ads link. So, you may be clicked many times for downloading the source code files.

How to create Day - Night mode toggle checkbox using HTML & CSS

Watch Tutorial of Day - Night mode toggle checkbox using HTML & CSS

Post a Comment

Post a Comment

How To Create Responsive Navigation Menu Bar With Search Box Using Html And CSS - WebKitCoding