jQuery html5 buttons



First, include required libraries in the head of your page :

<link href="http://fonts.googleapis.com/css?family=Share:400" rel="stylesheet"> <!-- The button font -->    
<link rel="stylesheet" href="css/jhButton.css"> <!-- Buttons CSS syles -->    
<script src="js/jquery-1.7.1.min.js"></script>  <!-- jQuery --> 
<script src="js/jquery.jhButton.min.js"></script><!-- Buttons plugin --> 

Then, the initialization of the plugin must be put in a $(window).load(); function .

The parameters are configured as all the plugins jquery:

        fx : "iconCircle",                  // Rollover effect type : "iconCircle" , "shine" or "none"
        fxAlpha : 0.3,                      // Rollover effect opacity : 0.0 -> 1.0
        fxColor : "#FFFFFF",            // Rollover effect color : hex color value
        crystal : "linear",                // Crystal effect type : "linear", "curve", "diagonal" or "none"
        crystalAlpha : 0.13,            // Crystal effect opacity : 0.0 -> 1.0
        crystalColor : "#FFFFFF",    // Crystal effect color : hex value
        iconColor : "auto",             // Set icon color, if iconTint is true : hex color value or "auto"
        iconsPath : "icons/",          // Set icon folder path
        iconTint : true                   // Tint icon or not : true or false

Then, in the body, create your buttons :

<a href="#" class="jhButton">My Button</a>

Slide to the top Slide to the top

Differents sizes

Each button has three default sizes: default, "big" and "large". To set the size, just add the correct classname :

<a href="#" class="jhButton">My Button</a> <!-- Default, small size, no classname needed -->
<a href="#" class="jhButton big">My Button</a> <!-- Big size : just add .big class -->
<a href="#" class="jhButton large">My Button</a> <!-- Large Size : just add .large class -->

Render :

My Button My Button My Button

Slide to the top Slide to the top

Set an icon

This plugin is sell with 23 icons. You can add yours easily, in the generator, or manually.
To do this, just copy your image ( .png, 32*32px) in the icons path, and add .icon-[your file name without .png] to your icon, like this :

<!-- my icon filename is : star.png , and it was copied in ./icons/ folder -->

<a href="#" class="jhButton icon-star">My Button</a> <!-- Just add .icon-star class to display icon -->

Then you can choose to tint it or not and set the color, in the plugin parameters .

Render :

My Button

Slide to the top Slide to the top

Change buttons parameters in live

To change dynamicly the parameters of your buttons, you can use .data("jhButton").settings object, and refresh them with .data("jhButton").update() function, like this :

$('.jhButton').each(function(index, button) {
        $(button).data("jhButton").settings.fx = "shine";

My Button Change Icon color

Change the styles of the buttons

The .css file is is divided into two parts : the Core styles, you should not change, and the Theming styles, you can change the way you want .
This is classic css3 code, except for the gradient, which must be encoded in base64 to operate on older browsers. The generator does it all alone, but you can also use this service to create gradients .

Slide to the top Slide to the top

Several different buttons on the same page

You can easily combines differents buttons styles, like this :

Render :

A Dark Button A Green Button A Red Button

Slide to the top Slide to the top

Help and support

Any suggestion, bug report or a request for assistance ? Contact me at loopus_web@hotmail.fr .