Skip to main content

Neumorphic Toggle Switch Button design | HTML And CSS

Neumorphic-Toggle-Switch-Button-design

Neumorphic Toggle Switch Button design | HTML And CSS

"Neumorphic Toggle Switch Button design" is used to change the dark mode to light mode or vice versa. Apart from this, we can use it to show the switching one information tab to another tab like the signin, signup button. Nowadays this animation is very popular because it will give a great user experience. One of the best things about this effect is no javascript is required just use simple html and css.

So let's try to understand the working of this animation. We have an input element of type "checkbox" when the user clicks on the input, it changes to the state of the checkbox and one round circle will slide from left to right and vice versa according to the button state. If the button is on then it will move from right to left otherwise it will move from left to right.

For more button animation you can follow the button playlist.

If you want to learn animation using javascript and js-plugins, We have already created a lot of animations using various plugins of javascript, check out the playlist. We hope you like it.

You can read interesting articles on web development. The link is given below.

 

01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Neumorphic Toggle Switch Button design | Rustcode</title> 
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>

 

 

02. HTML

<!DOCTYPE html>
<html>
<head>
   <title>Neumorphic Toggle Switch Button design | Rustcode</title>
</head>
<body>
  
<div class="container">
  <div class="components">
    
    <div class="switch-container">
      <div class="switch">
        <input id="switch-input" type="checkbox">
        <label for="switch-input"></label>
      </div>
    </div>
   </div>
  </div>
    
</body>
</html>

 

03. CSS

:root {
  --primary: #6d5dfc;
  --primary-light: #8abdff;  
  --primary-dark: #5b0eeb;
  --white: #FFFFFF;
  --greyLight-1: #E4EBF5;
  --greyLight-2: #c8d0e7;
  --greyLight-3: #bec8e4;
  --greyDark: #9baacf;
}


.container {
  display: flex;
  background: var(--greyLight-1);
}

.components {
  padding: 50px;
}


.switch-container {
  display:flex;
  flex-direction: row-reverse;
  justify-content: left;
  align-items: flex-start;
}


.switch-container input {
  display: none;
}

.switch{
  width: 6rem;
}

.switch label{
  display: flex;
  align-items: center;
  width: 100%;
  height: 3rem;
  box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
  background: rgba(255, 255, 255, 0);
  position: relative;
  cursor: pointer;
  border-radius: 1.6rem;
}
.switch label::after{
  content: "";
  position: absolute;
  left: 0.4rem;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--greyDark);
  transition: all 0.4s ease;
}
.switch label::before{
  content: "";
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(330deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
  opacity: 0;
  transition: all 0.4s ease;
}

.switch-container input:checked ~ label::before {
  opacity: 1;
}

.switch-container input:checked ~ label::after {
  left: 57%;
  background: var(--greyLight-1);
}

 

Output:

Neumorphic-Toggle-Switch-Button-design-Demo

 

Comments