<div class="emoji-toggle emoji-happy">
  <input type="checkbox" id="toggle1" class="toggle">
  <div class="emoji"></div>
  <label for="toggle1" class="well"></label>
</div>

<div class="emoji-toggle emoji-travel">
  <input type="checkbox" id="toggle2" class="toggle">
  <div class="emoji"></div>
  <label for="toggle2" class="well"></label>
</div>

<div class="emoji-toggle emoji-food">
  <input type="checkbox" id="toggle3" class="toggle">
  <div class="emoji"></div>
  <label for="toggle3" class="well"></label>
</div>

<div class="emoji-toggle emoji-vote">
  <input type="checkbox" id="toggle4" class="toggle">
  <div class="emoji"></div>
  <label for="toggle4" class="well"></label>
</div>

<div class="emoji-toggle emoji-love">
  <input type="checkbox" id="toggle5" class="toggle">
  <div class="emoji"></div>
  <label for="toggle5" class="well"></label>
</div>

// Base class
.emoji-toggle {
  position: relative;
  width: 60px;
  margin: 40px auto;
  .well {
    display: block;
    background: #eee;
    height: 20px;
    border-radius: 10px;
    cursor: pointer;
  }
  .toggle {
    opacity: 0;
    border: 0;
    outline: none;
    height: 100%;
    width: 100%;
    background: transparent;
    position: absolute;
    cursor: pointer;
    z-index: 100; 
    ~.emoji:before {
      content: "\01F431";
      position: absolute;
      left: 0;
      top: -15px;
      font-size: 40px;
      transition: 0.2s;
    }
    &:checked {
      ~.emoji:before {
        left: 100%;
        margin-left: -1em;
      }
    }
    ~label {
      white-space: nowrap;
      &:before {
        position: absolute;
        right: 100%;
        margin-right: 5px;
        top: 0;
      }
      &:after {
        position: absolute;
        left: 100%;
        margin-left: 5px; 
        top: 0;
      }
    }
  }
}

@mixin emojiType($leftEmoji, $rightEmoji, $leftLabel, $rightLabel) {
  .toggle {
    ~.emoji:before {
      content: $leftEmoji;
    }
    &:checked {
      ~.emoji:before {
        content: $rightEmoji;
      }
    }
     ~label {
      &:before {
        content: $leftLabel;
      }
      &:after {
        content: $rightLabel;
      }
    }
  }
}

.emoji-happy {
  @include emojiType(
    "\01F604", "\01F620", "Happy", "Mad"
  );
}

.emoji-travel {
  @include emojiType(
    "\02708", "\01F683", "Plane", "Train"
  );
}

.emoji-food {
  @include emojiType(
    "\01F354", "\01F355", "Burger", "Pizza"
  );
}

.emoji-vote {
  @include emojiType(
    "\01F44D", "\01F44E", "Thumbs Up", "Thumbs Down"
  );
}

.emoji-love {
  @include emojiType(
    "\01F498", "\01F494", "Loves Me", "Loves Me Not"
  );
}