Card Carousel Using Javascript | Frontend Everything - 2022

  

Mood Changer Toggle Button in HTML and CSS | No Javascript Used | By Frontend Everything

Hello Everyone 👋Welcome to My New Mood changer toggle button with the help of HTML and CSS | We have used no javascript in this 😎

I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.

Let's start making the mood changer button!

Preview of the project,

So lets start making it

HTML 🎈( step - 1 )

 <div class="toggleBox">  
  <input class="checkbox" type="checkbox" id="checkbox"/>  
  <label class="toggleBar" for="checkbox">  
   <div class="ball ballGradient">  
    <!-- face awake -->  
    <div class="face faceAwake">  
     <div class="eyes eyesLeft">  
      <div class="eyesBall"></div>  
     </div>  
     <div class="eyes eyesRight">  
      <div class="eyesBall"></div>  
     </div>  
     <div class="mouth">  
      <div class="mouthLips"></div>  
     </div>  
    </div>  
    <!-- end face awake -->  
    <!-- face sleep -->  
    <div class="face faceSleep">  
     <div class="eyes eyesLeft">  
      <div class="eyesBall"></div>  
     </div>  
     <div class="eyes eyesRight">  
      <div class="eyesBall"></div>  
     </div>  
     <div class="mouth">  
      <div class="mouthLips"></div>  
     </div>  
    </div>  
    <!-- end face sleep -->  
   </div>  
  </label>  
 </div>  
 <h1>Toggle Button Effect</h1>  

CSS🎈( step - 2 )

 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');  
 html {  
  height: 100%;  
 }  
 body {  
  font-size: 0;  
  font-family: poppins;  
  background: yellow;  
  color: #000;  
 }  
 h1 {  
  font-size: 26px;  
  text-align: center;  
 }  
 .toggleBox {  
  max-width: 420px;  
  padding: 1%;  
  overflow: hidden;  
  position: relative;  
  margin: 0 auto;  
 }  
 p {  
  font-size: 16px;  
  color: white;  
  text-align: right;  
 }  
 .footer {  
  position: fixed;  
  bottom: 0;  
  right: 15px;  
 }  
 .toggleBar {  
  width: 30%;  
  padding-bottom: 20%;  
  background-color: #6e6e6e;  
  float: left;  
  position: relative;  
  margin-left: 35%;  
  transition: all 0.6s ease-out;  
 }  
 .toggleBar::before {  
  content: "";  
  width: 60%;  
  position: absolute;  
  background-color: #6e6e6e;  
  top: 0;  
  left: -30%;  
  height: 100%;  
  border-radius: 50% 0 0 50%;  
  transition: all 0.6s ease-out;  
 }  
 .toggleBar::after {  
  content: "";  
  width: 60%;  
  position: absolute;  
  background-color: #6e6e6e;  
  top: 0;  
  right: -30%;  
  height: 100%;  
  border-radius: 0 50% 50% 0;  
  transition: all 0.6s ease-out;  
 }  
 .ball {  
  width: 60%;  
  padding-bottom: 60%;  
  position: absolute;  
  background-color: white;  
  top: 5%;  
  left: -25%;  
  border-radius: 50%;  
  box-shadow: 0px 2px 8px #999;  
  overflow: hidden;  
  z-index: 1;  
  transition: all 0.6s ease-in;  
 }  
 .ballGradient {  
  background-image: radial-gradient(circle at 80% 20%, white 0%, #FFF 30%, #DDD 80%);  
 }  
 /* face component */  
 .face {  
  width: 50%;  
  padding-bottom: 50%;  
  position: absolute;  
  top: 30%;  
  left: 25%;  
  /*  border:1px solid red; */  
 }  
 .faceSleep {  
  top: 25%;  
  left: 15%;  
  transition: all 0.3s ease-in 0.3s;  
 }  
 .faceAwake {  
  left: 35%;  
  transition: all 0.3s ease-in 0s;  
  transform: translateX(-200%);  
 }  
 .face .eyes {  
  width: 30%;  
  height: 30%;  
  /*  border:1px solid red; */  
  position: absolute;  
  top: 20%;  
  overflow: hidden;  
 }  
 .face .eyesLeft {  
  left: 5%;  
 }  
 .face .eyesRight {  
  right: 5%;  
 }  
 .faceAwake .eyesLeft {  
  left: 0%;  
 }  
 .faceAwake .eyesRight {  
  right: 0%;  
 }  
 .faceSleep .eyes {  
  top: 40%;  
 }  
 .faceSleep .eyesBall {  
  width: 80%;  
  height: 80%;  
  position: absolute;  
  border-radius: 50%;  
  background-color: #8f8f8f;  
  top: -45%;  
  /*  border:5% solid #8f8f8f; */  
 }  
 .faceAwake .eyesBall {  
  width: 60%;  
  height: 65%;  
  position: absolute;  
  border-radius: 50%;  
  background-color: #8f8f8f;  
  top: 5%;  
  /*  border:5% solid #8f8f8f; */  
 }  
 .face .mouth {  
  width: 100%;  
  height: 30%;  
  /*  border:1px solid red; */  
  position: absolute;  
  left: 0%;  
  bottom: 0%;  
  overflow: hidden;  
 }  
 .faceSleep .mouthLips {  
  width: 20%;  
  height: 40%;  
  background-color: #8f8f8f;  
  position: absolute;  
  top: -10%;  
  left: 35%;  
  border-radius: 50%;  
 }  
 .faceAwake .mouthLips {  
  width: 60%;  
  padding-bottom: 45%;  
  background-color: #337aff;  
  position: absolute;  
  top: -60%;  
  left: 12.5%;  
  border-radius: 50%;  
  box-shadow: inset 0px 9px 9px rgba(115, 115, 115, 0.5);  
 }  
 .faceSleep .mouth {  
  bottom: -10%;  
 }  
 .faceAwake .mouth {  
  bottom: 10%;  
 }  
 /* transition */  
 .checkbox:checked ~ .toggleBar, .checkbox:checked ~ .toggleBar::before,  
 .checkbox:checked ~ .toggleBar::after {  
  background-color: #337aff;  
 }  
 .checkbox:checked ~ .toggleBar .ball {  
  transform: translateX(150%);  
 }  
 .checkbox:checked ~ .toggleBar .faceSleep {  
  transform: translateX(200%);  
  transition-dealy: 0;  
  transition: all 0.3s ease-out 0s;  
 }  
 .checkbox:checked ~ .toggleBar .faceAwake {  
  transform: translateX(0);  
  transition-dealy: 0;  
  transition: all 0.3s ease-out 0.3s;  
 }  

Output is here 

See the Pen Mood changer toogle button by Piyush (@CodedByPiyush) on CodePen.

The codepen link is here for making your work easier!

Click here for the code!

.

.

.

.

.

.

Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development  Daily.

.

More blogs you should give a check!

• A Simple card in Tailwind CSS
• Best Apps for Learning Coding
• Top-notch Project ideas For HTML< CSS< Javascript

• Best Platform To sell your Website Templates
• Google Homepage Clone With Html and css