Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
HTML5 / Canvas

jQuery Html5 Buttons

— Add-On to

Subscribe to our feed to stay up to date!

New! Follow us as you want it!

jQuery Html5 Buttons - CodeCanyon Item for Sale


Ad: Bluehost hosting

jQuery html5 Buttons combines the power of jQuery, the graphics capabilities of HTML5 canvas component and the beauty of a design in css3, to give superb animated buttons, very easy to integrate.

The package contains the plugin, the documentation and this online smart generator : create your buttons in live and dowload them, ready to work.

The generator is included to create your own buttons. You must not distribute freely the buttons.

For more informations, look at the Live Preview!


  • CSS3 design, load time optimized and easy to edit
  • Many jQuery parameters to customize the effects
  • An online live and smart generator included
  • Intelligent browser compatibility : the buttons work on all browsers, but are more or less detailed depending on its capabilities
  • 23 icons included, and add yours easily
  • Documentation and examples
  • CSS3 + HTML5 = Mobiles compatibility
  • Works with jQuery 1.6 and more

Plugin Parameters

  • fx : Rollover effect type : “iconCircle”, “shine” or “none”
  • fxAlpha : Rollover effect opacity : 0.0 -> 1.0
  • fxColor : Rollover effect color : hex color value, like ”#FFFFFF”
  • crystal : Crystal effect type : “linear”, “curve”, “diagonal” or “none”
  • crystalAlpha : Crystal effect opacity : 0.0 -> 1.0
  • crystalColor : Crystal effect color : hex value, like ”#FFFFFF”
  • iconColor : Sets icon color if iconTint is true : hex color value or “auto”
  • iconsPath : Sets icon folder path
  • iconTint : Tints icon or not : true or false

Online generator features

  • Creation of the buttons in live
  • Download your custom buttons ready to work
  • Creation of custom icon sets
  • Smart automations, to keep harmony


Create a button

To create a button, simply add the button classname to your link, like this :

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

And initialize the jQuery plugin :


Differents sizes

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

<a href=”#” class=”jhButton large”>My Button</a>

Add an icon

Just add the icon classname to the button :

<a href=”#” class=”jhButton icon-home”>My Button</a>


If you need help, contact me from my envato profile.

If you bought this plugin and love it, remember to leave a vote!

You need a freelance? Contact me!


2012-03-30 : If the parameter “iconTint” is false, old browsers without html5 support will display the icon

2012-06-26 : The generator is now included in the package!


\\ \\

\\ \\

PHP Plugins

PHP Flat Visual Chat PHP Flat Estimation and Payment Forms


Other components in this categoryAll components of this author
CommentsFrequently asked questions and answers


18 March 12

Last Update:

Compatible Browsers:
IE6, IE7, IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome

Files Included:
JavaScript JS, HTML, CSS


eCommerce, eCommerce, All Items, animated buttons, button generator, buttons creator, buttons effects, canvas button, css3 buttons, gradient buttons, html5 buttons, icon buttons, jhb, jquery buttons, jquery buttons generator, shine, shining