<button class="c-smileyButton">
  <div class="c-smileyButton__hoverListener"></div>
  <div class="c-smileyButton__hoverListener"></div>
  <span class="c-smileyButton__face"></span>

  &nbsp;Hover me
</button>

$debug: false;

$black: #000000;
$half-spanish-white: #fef2dc;
$perfume: #e0acf7;
$red: #ff0000;
$white: #ffffff;

body {
  position: relative;
  overflow: hidden;
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background-color: $half-spanish-white;
}

.c-smileyButton {
    font-size: 25px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: $white;

    border: 0;
    outline: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    
    position: relative;
    height: 2.5em;
    padding: 0.5em 0.75em;
    border-radius: 0.25em;
    box-sizing: border-box;
    background-color: $perfume;
    box-shadow: 0 0.15em 1em rgba($black, 0.2);
    z-index: 1;

    &:hover .c-smileyButton__face::before {
        content: '\1F618';
        animation: animate 1.05s infinite;
    }
    
    // cursor fix
    &::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        cursor: pointer;
        z-index: 1;
    }
}

.c-smileyButton__face::before {
    content: '\1F614';
}

.c-smileyButton__hoverListener {
    position: absolute;
    cursor: default;
    z-index: -1;

    @if $debug {
        background-color: rgba($red, 0.2);
    }

    &:hover ~ .c-smileyButton__face::before {
        animation: none;
    }

    &:nth-child(1) {
        width: 290%;
        height: 550%;

        &:hover ~ .c-smileyButton__face::before {
          content: '\1F60C';
        }
    }

    &:nth-child(2) {
        width: 190%;
        height: 330%;

        &:hover ~ .c-smileyButton__face::before {
          content: '\1F61A';
        }
    }
}

@keyframes animate {
    100% { content: '\1F60A'; }
}

/* ¯\_(ツ)_/¯ */