.switch
  input(type="checkbox" id="toggle")
  label(for="toggle")
    .pumpkin-container
      .eyes-n-nose
      .mouth-n-teeths
    .vampire-container
      .eyes
      .mouth
        .teeths
        .tongue
      
View Compiled
@import url('https://fonts.googleapis.com/css?family=Kodchasan');
// center
body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: #081219;
}

* {
  font-family: 'Kodchasan';
}

.switch {
  
  input[type=checkbox] {
    display:none;

    &:checked + label {
      border-color: #4D7C99;
      
      &:before {
        content: 'Vampire';
        color: #4D7C99;
        font-size: 50px;
        text-transform: uppercase;
        position: absolute;
        left: 25%;
        transform: translateX(-25%);
        line-height: 190px;
        transition: .5s ease;
        z-index: 0;
      }
    }

    &:checked + label .pumpkin-container {
      left: calc(100% - 5px);
      transform: translateX(-100%);
      opacity: 0;
    }

    &:checked + label .vampire-container {
      left: calc(100% - 5px);
      transform: translateX(-100%);
      opacity: 1;
    }
  }
  
  label {
    border: 3px solid #E56D48;
    cursor: pointer;
    height: 200px;
    border-radius: 200px;
    display: flex;
    width: 600px;
    position: relative;
    transition: .5s ease-in-out;
      
      &:before {
        content: 'Pumpkin';
        color: #E56D48;
        font-size: 50px;
        text-transform: uppercase;
        position: absolute;
        left: 70%;
        transform: translateX(-70%);
        line-height: 190px;
        transition: .5s ease;
        z-index: 0;
      }
    
    .pumpkin-container {
      background: #E56D48;
      width: 190px;
      height: 190px;
      position: absolute;
      border-radius: 190px;
      left: 5px;
      top: 5px;
      overflow: hidden;
      transition: .5s ease;
      opacity: 1;
      
      .eyes-n-nose {
        background: #330A0F;
        position: absolute;
        left: 50%;
        top: 30%;
        transform: translate(-50%, -30%);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 16px 32px 16px;
        border-color: #E56D48 #E56D48 #330A0F #E56D48;
        
        &:before,
        &:after {
          content: '';
          background: #330A0F;
          position: absolute;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          top: 10px;
          left: 0;
        }
        
        &:before {
          margin-left: -65px
        }
        
        &:after {
          margin-left: 45px
        }
      }
      
      .mouth-n-teeths {
        height: 65px;
        width: 65px * 2;
        background: #330A0F;
        bottom: 0;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -35%);
        border-bottom-left-radius: 65px * 2;
        border-bottom-right-radius: 65px * 2;
        
        &:before, 
        &:after {
          content: '';
          position: absolute;
          background: #E56D48;
          height: 15px;
          width: 20px;
        }
        &:before {          
          left: 25px;
          top: -1px
        }
        &:after {
          right: 25px;
          bottom: 0;
          height: 20px;
        }
      }
    }
    
    .vampire-container {
      background: #4D7C99;
      width: 190px;
      height: 190px;
      position: absolute;
      border-radius: 190px;
      left: 5px;
      top: 5px;
      overflow: hidden;
      transition: .5s ease;
      opacity: 0;
      
      &:before,
      &:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: #C2DEF2;
        border-radius: 45% 45% 0 0;
        top: 15px;
      }
      
      &:before {
        left: -80px;
      }
      
      &:after {
        right: -80px;
      }
      
      .eyes {
        position: absolute;
        left: 50%;
        top: 30%;
        transform: translate(-50%, -30%);
        z-index: 1;
        
        
        &:before,
        &:after {
          content: '';
          background: #D63E49;
          position: absolute;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          top: 0;
          left: 0;
        }
        
        &:before {
          margin-left: -65px
        }
        
        &:after {
          margin-left: 45px
        }
      }
      
      .mouth {
        height: 65px;
        width: 65px * 2;
        background: #330A0F;
        bottom: 0;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -35%);
        border-bottom-left-radius: 65px * 2;
        border-bottom-right-radius: 65px * 2;
        overflow: hidden;
        z-index: 1;
        
        .teeths {
          background: #FFFAE6;
          width: 100%;
          position: absolute;
          left: 0;
          top: -1px;
          height: 20px;
          
          &:before,
          &:after {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 13.0px 7.5px 0 7.5px;
            border-color: #fffae6 transparent transparent transparent;
            top: 19px;
          }
          
          &:before {
            left: 20px;
          }
          
          &:after {
            right: 20px;
          }
        }
        
        .tongue {
          height: 35px;
          width: 35px * 2;
          background: #D63E49;
          bottom: -15px;
          position: absolute;
          left: 50%;
          transform: translate(-50%, -35%);
          border-top-left-radius: 35px * 2;
          border-top-right-radius: 35px * 2;
        }
      }
    }
  }
}

@keyframes pseudo-move {
  0% {opacity: 0}
  100% {opacity: 1}
}
//https://dribbble.com/shots/1789464-It-s-Halloween

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.