Add custom styling to the favorites button

favorites-button-styling.php

<?php
/**
 * Styling should ideally be placed in your theme's style.css file. 
 * If you are not comfortable editing this file, or with CSS, the following 
 * may be placed in your theme's functions.php
 **/
 add_action('wp_head', 'style_favorites_button');
 function style_favorites_button()
 {
   echo '
    <style>
      .simplefavorite-button {
      	background-color: #000000;
      	border: 0;
      	color: #ffffff;
      }
      /* Active/Favorited State */
      .simplefavorite-button.active {
      	background-color: #cccccc;
      	border: 0;
      	color: #000000;	
      }
    </style>';
 }

Hi Kyle

Great plugin by the way. Just wanted to know how we would go about adding a "Tooltip" / Popup when a user hovers over the Favorite Button (as you have done on the Favorites Plugin website?

Would appreciate any help in this regard.

+1 to antware's question. how can we redesign the button output?

I did some digging in his code and found out how ... after a LOT of research to figure out where stuff was coming from:

css:

.favorite-button{position:absolute;z-index:2;bottom:10px;right:10px;height:30px}
.simplefavorite-button{position:relative;cursor:pointer;font-size:15px;height:30px;padding:0 52px 0 12px;color:#c0db2d;background:#3b1e3a;border:0;font-family:raleway,sans-serif;font-style:normal;font-weight:400}
.simplefavorite-button .text{position:absolute;top:0;left:50%;opacity:0;visibility:hidden;margin-left:-50px;background-color:rgba(0,0,0,.8);color:#fff;width:100px;height:30px;font-size:14px;line-height:30px;-webkit-transition:all 200ms ease;-o-transition:all 200ms ease;transition:all 200ms ease}
.simplefavorite-button:hover .text{top:-40px;opacity:1;visibility:visible;-webkit-transition:all 200ms ease;-o-transition:all 200ms ease;transition:all 200ms ease}
.simplefavorite-button i{font-size:20px;display:block;position:absolute;width:30px;height:30px;line-height:30px;right:0;top:0;background-color:rgba(0,0,0,.2)}
.simplefavorite-button.loading{padding-right:12px}
.simplefavorite-button.active{background-color:#c0db2d;color:#3b1e3a}
.simplefavorite-button:active,.simplefavorite-button:focus{outline:0}

And on the Settings->Favorites->Display page, enter these settings:

Button Text: Favorite
Button Text (Favorited): Unfavorite
Favorite Count: {check it yes}
Loading Indication: {check it yes if you want it}