Cool (Superman Mode) Pure CSS Minion

Minion made with CSS. More drawings soon!! What if this guy here is actually a Clark Kent Minion?? Think about it!! Maybe next time you come back here this guy is Super Minion!! :P

by Palma Hutabarat92

HTML

<!-- 
  Pure CSS Minion, just a little bit of js to toggle the Superman class.
  
  @author Ezequiel Calvo <[email protected]> 
                         Follow me @EzequielCalvo
                         Hashtag #CSSDrawing #Minion

  Nice to have: 
     - Wave on the coat.
     - Animation when changing the clothes.
-->
<section class="content" id="target">
  <ul class="hair hair-left">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <ul class="hair hair-right">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <div class="body">
    <div class="glasses">
      <span class="band band-left"></span>
      <span class="band band-right"></span>
      <div class="glass">
        <div class="iris iris-left">
          <div class="shine"></div>
        </div>  
      </div>
      <div class="glass">
        <div class="iris iris-right">
          <div class="shine"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="mouth">
    <ul class="teeth">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  <div class="pants">
    <div class="belt belt-left"></div>
    <div class="belt belt-right"></div>
  </div>
  <div class="super-pants">
    <div class="symbol">
      <div class="s-first-part"></div>
      <div class="s-second-part"></div>
    </div>
  </div>
  <div class="arm arm-left">
    <div class="hand">
      <ul class="fingers fingers-left">
        <li class="finger"></li>
        <li class="finger"></li>
        <li class="finger"></li>
      </ul>
    </div>
  </div>
  <div class="arm arm-right">
    <div class="hand">
      <ul class="fingers fingers-right">
        <li class="finger"></li>
        <li class="finger"></li>
      </ul>
    </div>
  </div>
  <div class="legs">
    <div class="leg"></div>
    <div class="leg"></div>
  </div>
  <div class="shoes shoes-left"></div>
  <div class="shoes shoes-right"></div>
  <div class="coat"></div>
</section>
<button class="btn">Superman...

CSS

/**
 * Minion Pure CSS 
 *
 * @author Ezequiel Calvo <[email protected]> 
 *                        Follow me @EzequielCalvo
 *                        Hashtag #CSSDrawing #Minion
 */
.btn {
  position: absolute;
  top: 10px;
  left: 10px;
  border: 0;
  padding: 5px 10px;
  border: 1px solid #c0392b;
  border-radius: 2px;
  font-size: 0.95em;
  background: #e74c3c;
  color: #EEE;
  font-weight: 60;
}

.btn:hover {
  background: #c0392b;
  border: 1px solid #e74c3c;
}

.btn.active {
  background: #2ecc71;
  border: 1px solid #27ae60;
}

.content {
  margin: 40px;
}

.body {
  width: 180px;
  height: 325px;
  margin: 0 auto;
  position:relative;
  z-index: 1;
  border-radius: 85px 85px 0 0;
  box-shadow: inset 0 -10px 10px 3px #cc9e24;
  background: #fcda6d;
  background: -webkit-gradient(linear, right top, left top,color-stop(61%, #fcda6d), color-stop(100%, #cc9e24)); 
  background: -webkit-linear-gradient(right, #fcda6d 67%,#cc9e24 100%);
  background:    -moz-linear-gradient(right, #fcda6d 67%,#cc9e24 100%);
  background:     -ms-linear-gradient(right, #fcda6d 67%,#cc9e24 100%);
  background:      -o-linear-gradient(right, #fcda6d 67%,#cc9e24 100%); 
  background:         linear-gradient(to right, #fcda6d 67%,#cc9e24 100%);
}

.hair {
  padding: 0;
}

.hair li {
  position: absolute;
  top: -1px;
  left: 50%;
  z-index: 2;
  list-style: none;
  height: 45px;
  width: 5px;
  border: 2px solid #555;
  border-radius: 140%;
  margin: 10px;
}

.hair-left li {
  border-left: none;
  border-bottom: none;
}

.hair-right li {
  border-right: none;
  border-bottom: none;
}

.hair-left li:nth-child(1) {
  margin: 20px 0 0 -60px;
  transform: rotate(-20deg);
}

.hair-left li:nth-child(2) {
  height: 30px;
  margin: 45px 0 0 -75px;
  transform: rotate(-50deg);
}

.hair-left li:nth-child(3) {
  height: 36px;
  margin: 15px 0 0 -35px;
  transform: rotate(-10deg);
}

.hair-left li:nth-child(4) {
  height: 26px;
  margin: 35px 0 0 -13px;
  transform:...

JavaScript

/**
 * Js event handler to change between Clark and Superman modes.
 *
 * @author Ezequiel Calvo <[email protected]> 
 *                        Follow me @EzequielCalvo
 *                        Hashtag #CSSDrawing #Minion
 */

$('.btn').on('click', function() {
  $('#target').toggleClass('superman');
  $(this).toggleClass('active');
});