Font Awesome Button CSS

by Kheema Pandey

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<a href="javascript:void(0);" class="wishlist">Wishlist</a>
  <!-- Using Button Element -->
  
  <button type="button" class="wishlist">Wishlist</button>

CSS

a.wishlist{
   background-color: #a4cd45;
   border-radius:50%;
   height: 40px;
   width: 40px;
   border:0;
   color: rgba(255, 255, 255, 0);
   display:block;
   margin: 17px 10px 0 0;
   position: relative;
   z-index: 2;
   font-size: 90%;
   cursor: pointer;
   float:right;
}
a.wishlist:hover:before{ text-shadow: 1px 1px 1px #ef8913;}

a.wishlist:before {
    content: "\f08a";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    position: absolute;
    top: 12px;
    left: 10px;
}

/*---------------Using Button Element-------------------*/

button.wishlist{
   background-color: #a4cd45;
   border-radius:50%;
   height: 40px;
   width: 40px;
   border:0;/*If remove this property you will see a gray background as shows on image*/
   color: rgba(255, 255, 255, 0);
   display:block;
   margin: 17px 10px 0 0;
   position: relative;
   outline:0;
  cursor:pointer; /*Give an Effect of Clickable*/
}
button.wishlist:hover:before{ text-shadow: 1px 1px 1px #ef8913; }

button.wishlist:before {
    content: "\f08a";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    position: absolute;
    top: 12px;
    left: 10px;
}