3D RED SWITCH
3D RED SWITCH

Hy Everyone, In this tutorial we will create a 3D Red Switch using HTML & CSS. Our 3D Red Switch will look realistic.

Our 3d Switch will look realistic traditional switch. As we mentioned we will use HTML & CSS, so we will create two files called index.html & style.css. Let’s start with our index.html file.

3D Red Switch

index.html

<!DOCTYPE html>
<head>
<title>3D Red Switch</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>    
  <label class="switch">
    <input type="checkbox" checked="checked"/>
    <div class="button">
      <div class="light"></div>
      <div class="dots"></div>
      <div class="characters"></div>
      <div class="shine"></div>
      <div class="shadow"></div>
    </div>
  </label>
</body>
</html>


here we are using the input type checkbox because a switch needs only on or off values. So here we used a checkbox for true and false values.

Next, we have created a div with a class “button” for our realistic 3D button. inside that div, we have created other divs with different class names for different looks and shades of the button ( on state looks different from off state).

style.css

body, html {
  width: 99%;
  height: 99%;
}

body {
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.switch {
  background-color: black;
  width: 150px;
  height: 195px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
  border-radius: 5px;
  padding: 20px;
  perspective: 700px;
}
.switch input {
  display: none;
}
.switch input:checked + .button {
  transform: translateZ(20px) rotateX(25deg);
  box-shadow: 0 -10px 20px #ff1818;
}
.switch input:checked + .button .light {
  animation: flicker 0.2s infinite 0.3s;
}
.switch input:checked + .button .shine {
  opacity: 1;
}
.switch input:checked + .button .shadow {
  opacity: 0;
}
.switch .button {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  transform-origin: center center -20px;
  transform: translateZ(20px) rotateX(-25deg);
  transform-style: preserve-3d;
  background-color: #9b0621;
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  background: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%);
  background-repeat: no-repeat;
}
.switch .button::before {
  content: "";
  background: linear-gradient(rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.3) 30%, #650000 75%, #320000) 50% 50%/97% 97%, #b10000;
  background-repeat: no-repeat;
  width: 100%;
  height: 50px;
  transform-origin: top;
  transform: rotateX(-90deg);
  position: absolute;
  top: 0;
}
.switch .button::after {
  content: "";
  background-image: linear-gradient(#650000, #320000);
  width: 100%;
  height: 50px;
  transform-origin: top;
  transform: translateY(50px) rotateX(-90deg);
  position: absolute;
  bottom: 0;
  box-shadow: 0 50px 8px 0px black, 0 80px 20px 0px rgba(0, 0, 0, 0.5);
}
.switch .light {
  opacity: 0;
  animation: light-off 1s;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);
}
.switch .dots {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%);
  background-size: 10px 10px;
}
.switch .characters {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, white) 50% 20%/5% 20%, radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80%/33% 25%;
  background-repeat: no-repeat;
}
.switch .shine {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 0.3;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%, linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%;
  background-repeat: no-repeat;
}
.switch .shadow {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.8));
  background-repeat: no-repeat;
}

@keyframes flicker {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}
@keyframes light-off {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
}

some of the important animations are light flicker and light-off.

Light Flicker Animaiton:

@keyframes flicker {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

Here we are using opacity to create a flicker animation.

Light-Off:

@keyframes light-off {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
}

Here we are also using opacity for light off state.

Hope you guys enjoyed this tutorial!

If you are having any issues with the code, then you can visit our GitHub Account. Click Here!

You Might Like This:

Our Courses:

HTML – Beginner to Advance

CSS – Beginner to Advance

Click to rate this post!
[Total: 0 Average: 0]

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