Create Minion Eyes Toggle using Pure CSS

Hello Friends, In this tutorial we will learn how to create minion eyes toggle. This is pure CSS implementation of a Minion switch button that toggles the eyes of the Minion. When the switch button is toggled on, the Minion's eyes change from their default position to a "reverse" position, and the text "X" appears in the button. When the switch button is toggled off, the Minion's eyes return to their default position, and the text "✓" appears in the button.

The HTML code includes two instances of the switch button, one with the default eye position and one with the reversed eye position. Each switch button consists of an HTML checkbox input element and a button element, which includes an eye element.

The CSS code includes styling for the switch button, the button element, and the eye element. The eye element includes an eye-back element, an eye-inner element, and an eye-cover element. The eye-inner element contains a brown eye element with a white highlight and a black pupil. The eye element is positioned absolutely within the button element and is given a transition effect so that it moves smoothly between the default and reverse positions.

Overall, this implementation is a fun and creative way to implement a toggle button with pure CSS, and it demonstrates the power and flexibility of CSS for web design.

HTML

 <h1>Minion Switches button</h1>

<div class="minion-switcher">

 <input type="checkbox" class="check">

 <div class="btn">

  <div class="eye">

   <div class="eye-back"></div>

   <div class="eye-inner">

    <div class="eye-brown"></div>

   </div>

   <div class="eye-cover"></div>

  </div>

 </div>

</div>




<div class="clearfix"></div>




<div class="minion-switcher reverse">

 <input type="checkbox" class="check">

 <div class="btn">

  <div class="eye">

   <div class="eye-back"></div>

   <div class="eye-inner">

    <div class="eye-brown"></div>

   </div>

   <div class="eye-cover"></div>

  </div>

 </div>

</div>

CSS

/***** Global *****/
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.clearfix {
  clear: both;
  margin: 40px;
}

body {
  background-color: #eee;
  text-align: center;
  padding-top: 30px;
}

h1 {
  color: #402E1D;
  margin-bottom: 30px;
}

/***** Switcher *****/
.minion-switcher {
  width: 120px;
  height: 60px;
  display: inline-block;
  position: relative;
}
.minion-switcher .check {
  width: 120px;
  height: 60px;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  outline: 0;
  border: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
.minion-switcher .btn {
  background: #ffcd01;
  width: 120px;
  height: 60px;
  border-radius: 120px;
  overflow: hidden;
  position: absolute;
  top: 0;
  box-shadow: 0 1px #C2BEAD;
}
.minion-switcher .btn:before, .minion-switcher .btn:after {
  font-family: sans-serif;
  color: white;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.minion-switcher .btn:before {
  content: "✓";
  left: 22px;
  font-size: 26px;
}
.minion-switcher .btn:after {
  content: "X";
  right: 22px;
  font-size: 0;
}
.minion-switcher.reverse .btn:before {
  font-size: 0;
}
.minion-switcher.reverse .btn:after {
  font-size: 26px;
}
.minion-switcher.reverse .eye {
  left: 3px;
  right: auto;
}
.minion-switcher.reverse .eye .eye-inner .eye-brown {
  margin-right: 10px;
  margin-top: 61%;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.minion-switcher.reverse .eye .eye-cover {
  top: 0;
}

.eye {
  width: 54px;
  height: 54px;
  border-radius: 54px;
  border: 7px solid #878787;
  overflow: hidden;
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 1;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.eye .eye-back {
  width: 44px;
  height: 44px;
  border-radius: 440px;
  margin: -2px;
  background-color: #fff;
  -webkit-transform: scaleY(0.75);
  -ms-transform: scaleY(0.75);
  transform: scaleY(0.75);
  position: absolute;
}
.eye .eye-inner {
  position: relative;
  height: 100%;
  width: 100%;
  text-align: center;
}
.eye .eye-inner .eye-brown {
  width: 12px;
  height: 12px;
  display: inline-block;
  background-color: #402E1D;
  border-radius: 12px;
  margin-top: 50%;
  transform: translateY(-50%);
  position: relative;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.eye .eye-inner .eye-brown:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background-color: #000;
  position: absolute;
  top: 3px;
  left: 3px;
}
.eye .eye-inner .eye-brown:after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background-color: #fff;
  position: absolute;
  top: -1px;
  left: -1px;
}
.eye .eye-cover {
  width: 60px;
  height: 20px;
  margin-right: -10px;
  background-color: #ffcd01;
  position: absolute;
  top: -20px;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.check:checked + .btn:before {
  font-size: 0;
}
.check:checked + .btn:after {
  font-size: 26px;
}
.check:checked + .btn .eye {
  right: 62px;
}
.check:checked + .btn .eye .eye-inner .eye-brown {
  margin-right: 10px;
  margin-top: 61%;
}
.check:checked + .btn .eye .eye-cover {
  top: 0;
}
.reverse .check:checked + .btn:before {
  font-size: 26px;
}
.reverse .check:checked + .btn:after {
  font-size: 0;
}
.reverse .check:checked + .btn .eye {
  left: 62px;
}
.reverse .check:checked + .btn .eye .eye-inner .eye-brown {
  margin-right: 0;
  margin-top: 50%;
}
.reverse .check:checked + .btn .eye .eye-cover {
  top: -20px;
}

In this way, we can create minion eyes toggle using pure css!