Like Button

By Christine Siu

like favorite social js button hover interaction

How do I use This?

A modern, rounded, ghost-style "like" button with heart icon that fills on click.

HTML

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

.button-like {
  border: 2px solid $dark-gray;
  background-color: transparent;
  text-decoration: none;
  padding: 1rem;
  position: relative;
  vertical-align: middle;
  text-align: center;
  display: inline-block;
  border-radius: 3rem;
  color: $dark-gray;
  transition: all ease 0.4s;

  span {
    margin-left: 0.5rem;
  }

  .fa,
  span {
    transition: all ease 0.4s;
  }

  &:focus {
    background-color: transparent;

    .fa,
    span {
      color: $dark-gray;
    }
  }

  &:hover {
    border-color: $alert-color;
    background-color: transparent;

    .fa,
    span {
      color: $alert-color;
    }
  }
}

.liked {
  background-color: $alert-color;
  border-color: $alert-color;

  .fa,
  span {
    color: $white;

  }

  &:focus {
    background-color: $alert-color;

    .fa,
    span {
      color: $white;
    }
  }

  &:hover {
    background-color: $alert-color;
    border-color: $alert-color;

    .fa,
    span {
      color: $white;
    }
  }
}

.button-like {
  border: 2px solid #8a8a8a;
  background-color: transparent;
  text-decoration: none;
  padding: 1rem;
  position: relative;
  vertical-align: middle;
  text-align: center;
  display: inline-block;
  border-radius: 3rem;
  color: #8a8a8a;
  transition: all ease 0.4s;
}

.button-like span {
  margin-left: 0.5rem;
}

.button-like .fa,
.button-like span {
  transition: all ease 0.4s;
}

.button-like:focus {
  background-color: transparent;
}

.button-like:focus .fa,
.button-like:focus span {
  color: #8a8a8a;
}

.button-like:hover {
  border-color: #cc4b37;
  background-color: transparent;
}

.button-like:hover .fa,
.button-like:hover span {
  color: #cc4b37;
}

.liked {
  background-color: #cc4b37;
  border-color: #cc4b37;
}

.liked .fa,
.liked span {
  color: #fefefe;
}

.liked:focus {
  background-color: #cc4b37;
}

.liked:focus .fa,
.liked:focus span {
  color: #fefefe;
}

.liked:hover {
  background-color: #cc4b37;
  border-color: #cc4b37;
}

.liked:hover .fa,
.liked:hover span {
  color: #fefefe;
}

$(document).foundation();

$(function() {
  $('.button-like')
    .bind('click', function(event) {
      $(".button-like").toggleClass("liked");
    })
});

Like Button

By Christine Siu

Button Hover Options

Hover Add to Cart Button

Social Icon Buttons

Like Button

By Christine Siu

Similar Building Blocks

Button Hover Options

Hover Add to Cart Button

Social Icon Buttons