Hover Like Button

By Rafi

F6
#
How do I use This?

Hover over the button to reveal a heart.

HTML
<button class="button-hover-like button"><span>Like me</span><i class="fa fa-heart"></i></button>

.button-hover-like {
  border: 2px solid $secondary-color;
  background: transparent;
  color: $secondary-color;
  text-transform: uppercase;
  overflow: hidden;
  letter-spacing: 0.07rem;
  transition: all 0.2s ease-in-out;
  position: relative;

  span {
    transition: all 0.2s ease-in-out;
  }

  .fa {
    position: absolute;
    font-size: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    color: #F15261;
    right: -20px;
    transition: 0.4s right cubic-bezier(0.38,0.6,0.48,1);
  }

  &:hover {
    border-color: $primary-color;
    background: transparent;
    transition: border-color 0.2s;

    span {
      margin-right: 20px;
      color: $primary-color;
    }

    .fa {
      right: 10px;
    }
  }
}


.button-hover-like {
  border: 2px solid #767676;
  background: transparent;
  color: #767676;
  text-transform: uppercase;
  overflow: hidden;
  letter-spacing: 0.07rem;
  transition: all 0.2s ease-in-out;
  position: relative;
}

.button-hover-like span {
  transition: all 0.2s ease-in-out;
}

.button-hover-like .fa {
  position: absolute;
  font-size: 1.2rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  color: #F15261;
  right: -20px;
  transition: 0.4s right cubic-bezier(0.38, 0.6, 0.48, 1);
}

.button-hover-like:hover {
  border-color: #1779ba;
  background: transparent;
  transition: border-color 0.2s;
}

.button-hover-like:hover span {
  margin-right: 20px;
  color: #1779ba;
}

.button-hover-like:hover .fa {
  right: 10px;
}

JS