Animated Favorite Button

Introduction

This week I’m showing something more simple. I just wanted to make an easy animated favorite button. Using circles and icons, I made two animations. It consists of a front circle and a hidden circle that will be revealed through an animation. The first animation simply slides the hidden circle left and the front circle right. The second animation flips the circle horizontally to reveal the hidden circle on the backside.

HTML

This is the basic structure for the button. To switch between the 2 different animations change the horizontal class on the div to rotate.

<div class="icon horizontal">
  <a class="inner" href="#">124</a>
  <div class="icon-overlay">
    <a class="outer" href="#"><span class="icon-heart-empty"></span><span class="icon-heart"></span></a>
  </div>
</div>

CSS

Here are the basic styles for the layout and structure of the button. I also use FontAwesome for the heart icon.

.icon,
.icon-overlay,
.icon a {
  -webkit-transition: .3s ease-out;
  transition: .3s ease-out;
  
  width: 100px;
  height: 100px;
}

.icon {
  position: relative;
  margin: 100px auto;
  margin-top: 100px;
}
  .icon a {
    position: relative;
    margin: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #aaa;
    font-weight: bold;
    line-height: 100px;
    
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;    
  }
  .icon-overlay {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: #ddd;

    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;    
  }
    .icon-overlay a {
      background-color: #ddd;
      position: static;
      font-size: 30px;
    }
      .icon-overlay a span.icon-heart { display: none; }
      .icon.active .icon-overlay a span.icon-heart { display: inline; }
      .icon.active .icon-overlay a span.icon-heart-empty { display: none; }

Here is the css styles for the animations. The horizontal flip uses CSS3 Transforms with rotateY.

.icon:hover a{
  left: -40%;
}
.icon:hover .icon-overlay {
  left: 40%;
}

.icon.rotate a {
  transform:rotateY(-180deg);
  -ms-transform:rotateY(-180deg); 
  -webkit-transform:rotateY(-180deg); 
}
.icon.rotate:hover a {
  left: 0;
  transform:rotateY(0deg);
  -ms-transform:rotateY(0deg); 
  -webkit-transform:rotateY(0deg); 
  z-index: 1;
}
  
.icon.rotate:hover .icon-overlay {
  transform:rotateY(-180deg);
  -ms-transform:rotateY(-180deg); 
  -webkit-transform:rotateY(-180deg); 
  left: 0;
}

jQuery

The javascript is only to toggle the class which applies a change in the style. Here is where you would replace all my jQuery code if you want to implement some favorite system.

$("a.inner").click(function() {      
  $(this).parent().toggleClass("active");
});
$("a.outer").click(function() {      
  $(this).parent().parent().toggleClass("active");
});

The post Animated Favorite Button appeared first on webdesigncrowd.com.