Buttons are no longer rectangular and limited to grey and black. Thanks to jQuery, now you can paint your UI with colorful, glowing and animated buttons. Style the good old buttons to bring out impressive effects with these wonderful jQuery button design plugins.

1. Who-Tweet Button -Fancy jQuery Plugin for Twitter

I took the Topsy retweet button and jQuery-fied it, then added the “Who” part to it using the awesome Topsy API. to create this fancy share count button for your stories on twitter. thats it! The Who part is about attributing the people who tweet your story by showing their Twitter pictures inside the retweet button. Topsy keeps a complete history about Twitter trackbacks of your links which I utilized in another jQuery plugin and inspired me with this idea.

2. jQuery Tutorial ? Create a Realistic Hover Effect With jQuery

For one of the projects I?m currently working on with Rareview, we wanted to add a rising hover effect to a set of icon links. Using jQuery?s animate effect, I experimented with icons that have reflections and others with shadows.

3. Create an Animated Call to Action Button

In this web design and development tutorial, youll get a walkthrough for creating a Call to Action button sprite in Photoshop as well as how to use jQuery to animate it. This tutorial is broken up into three sections: Photoshop, HTML/CSS, and JavaScript.

4. Jquery Animated Buttons using CSS

If you use Skype I am sure that you noticed that animated button for adding more people to a chat. When you click on it the icon on the left “jumps” for a few times. I love that animation. And that is why I am going to show you how to create the same button using jQuery and some simple CSS.

5. Fancy Radio Buttons With jQuery

I recently read a fantastic tutorial by Aaron weyenberg which shows how to make checkboxes more visually appealing. This got me thinking, if checkboxes, why not radio buttons too? based on Aarons idea I have been able to create the same visually appealing technique, using radio buttons. I decided to take this one step further and apply it to a table.

6. Glowbuttons Using jQuery

This jQuery plugin helps you to create glowing buttons using jQuery.

7. Jquery Button Animation

A jQuery plug-in that does a PNG animation on hover over a button.

8. Awesome radio button grouping with jQuery

I was asked to do something rather interesting with some radio button inputs the other day. I have not come across this particular problem before and google did not return anything helpful, so I decided to share what I came up with.

9. JQuery Plugin: Web SpinButton

This page demontrates a Web Spin-Button control using only a textbox.

10. Styling Buttons and Toolbars with the jQuery UI CSS Framework

By popular demand: coded real-world examples of themeable buttons and toolbars using the jQuery UI CSS framework, a system of classes developed for jQuery UI widgets that can easily be applied to any plugin, and even static content.

11. jQuery UI Buttons

A standard set of button types that can be used across all widgets. Buttons can be basic (A1), have a menu (A2), a split button which opens a menu only when the right hand arrow is clicked (A3) or toggle buttons (A4) that behave like a radiobutton set where only one can be depressed at once. Buttons in a UI usually have different visual styles to indicate importance (A5) such in a save/cancel dialog and may need to be multiple sizes (A6).

12. Using Jquery ? Check boxes and Radio buttons

Usage of Jquery is comparatively simple for input type text, button, file, reset etc. because these controls generally hold data but not state like on and off. Check box and radio buttons are two controls which are generally used for state data like option is on/off, one is selected from a group of options etc.

13. jQuery imageless buttons

This jQuery plugin is an attempt to recreate Googles imageless buttons and prove that it doesnt take a whole team of engineers and an endless cycle of code revision and quality control (their own words) to pull this off. I dont know how Google did it, but my buttons automatically adapt to paddings and other styling you wish to use. They allow for a lot of stylistic customisatoin via a few lines of css while keeping all the display critical css rules hidden deep inside the plugin.

14. jQuery Button API

Button enhances standard form elements like button, input of type submit or reset or anchors to themable buttons with appropiate mouseover and active styles.

In addition to basic push buttons, radio buttons and checkboxes (inputs of type radio and checkbox) can be converted to buttons: Their associated label is styled to appear as the button, while the underlying input is updated on click.
Buttons can be grouped using the buttonSet method, which should be always applied for radio buttons.

15. jQuery Button Selector Api

Selects all button elements and elements of type button.

16. jQuery – Pagination Buttons

Learn to enable pager buttons with jQuery.

17. jQuery checkbox

Lightweight custom styled checkbox implementaion for jQuery 1.2.x and 1.3.x.

18. iToggle for jQuery

A completely unashamed rip of those lovely sliding on/off buttons on the iPhone, making checkboxes (and radio buttons) look good! With the help of jQuery this plugin will replace any checkbox or radio element you want with this sliding alternative.

19. How to create Skype-like buttons using jQuery

If you use Skype I am sure that you noticed that animated button for adding more people to a chat. When you click on it the icon on the left “jumps” for a few times. I love that animation. And that s why I m going to show you how to create the same button using jQuery and some simple CSS.

20. Kwicks for jQuery

Kwicks is a menu effect as seen on the MooTools home page, and here is a jQuery version producing the very same effect. Kwicks for jQuery started off as a port of the insatiably attractive Mootools effect (of the same name), but has evolved into a highly customizable and versatile widget.

In addition to basic push buttons, radio buttons and checkboxes (inputs of type radio and checkbox) can be converted to buttons: Their associated label is styled to appear as the button, while the underlying input is updated on click.
Buttons can be grouped using the buttonSet method, which should be always applied for radio buttons.
Web Site
Demo