Impossible Switch | CSS Switch
Impossible Switch | CSS Switch

Hy Everyone, In this tutorial, we will create a Switch Using CSS. It will be fun to create this switch. It will be funny because it will not switch on πŸ˜‚.

Table of Contents

Impossible Switch

For creating our switch, we will need to create two files called index.html and style.css. Let’s start with our index.html file.

index.html

First, connect the style.css file to our index.html file.

<head>
  <link rel="stylesheet" href="style.css">
</head>


Next, we will write our code inside the body tag.
Create a label with the class name “switch”.

<body>
  <label class="switch">
    
  </label>
</body>


Now, create an input tag inside the switch class.

<body>
  <label class="switch">
    <input type="checkbox" hidden>
  </label>
</body>


after that create a div with the class name “switch__wrapper” and inside this div create another div with the class name “switch__toggle”.

<body>
  <label class="switch">
    <input type="checkbox" hidden>
    <div class="switch__wrapper">
      <div class="switch__toggle"></div>
    </div>
  </label>
</body>


Here our index.html work is done, Let’s work on our style.css file.

style.css

Start creating with variables:

:root {
  --iPos: 50%;
  --bPos: -75%;
  --fPos: -50%;
}


Let’s give the background color and set other properties.

body {
  display: grid;
  height: 100vh;
  margin: 0;
  background: #212121;
}


Set the properties for the .switch, .switch__wrapper, and .switch__toggle class.

.switch {
  margin: auto;
}
.switch__wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 2rem;
  border: 2px solid #FFF;
  border-radius: 99rem;
  transform-origin: left center;
  animation: checked__wrapper 380ms ease-in forwards;
}

.switch__toggle {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 99rem;
  box-shadow: inset 0 0 0 2px #fff;
  transform-origin: inherit;
  animation: checked__toggle 380ms ease-in forwards;
}


These were the basic properties, Now we have the important properties and content for this switch.

input:checked + .switch__wrapper {
  transform-origin: right center;
  animation-name: outerLayer;
}
input:checked + .switch__wrapper .switch__toggle {
  background: #fff;
  animation-name: innerCircle;
}


here we applied CSS when the user clicks on the button, it will start the animation.

@keyframes checked__toggle {
  0% {
    background: transparent;
    transform: translateX(calc(-1 * var(--iPos)));
  }
  45% {
    background: transparent;
    transform: translateX(calc(-1 * var(--bPos))) scale(1, 1);
  }
  50% {
    background: transparent;
    transform: translateX(calc(-1 * var(--bPos))) scale(1, 1);
  }
  65% {
    transform: translateX(calc(-1 * var(--bPos))) scale(1, 1);
  }
  100% {
    transform: translateX(-50%) ;
  }
}
@keyframes innerCircle {
  0% {
    background: transparent;
    transform: translateX(calc(-1 * var(--iPos)));
  }
  45% {
    background: transparent;
    transform: translateX(calc(-1 * var(--bPos))) scale(1, 1);
  }
  50% {
    background: #fff;
    transform: translateX(calc(-1 * var(--bPos))) scale(0.5, 1.1);
  }
  65% {
    transform: translateX(calc(-1 * var(--bPos))) scale(1, 1);
  }
  100% {
    transform: translateX(-50%) ;
  }
}


These are our animations, which are used to move the outer layer of the switch and the inner circle of the switch.

Github Code Link!

If you find this post helpful then please share this with your friends.

You Might Like This:

Our Courses:

HTML – Beginner to Advance

CSS – Beginner to Advance

Oh, hi there πŸ‘‹ It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply