20 jQuery and CSS Button Tutorials

With all the talk of CSS3 recently, its easy to overlook the impact Javascript, especially jQuery, can have on the appearance of a basic web button. As such, we have collected 20 useful CSS button tutorials that have all been enhanced by the sooper-dooper power of jQuery.

Creative Button Tutorials with Sprite Animations and jQuery

Creative Button Animations with Sprites and JQuery

This tutorial will show you how to build creative hover animations for buttons using sprites. Part 1 of this tutorial explains the design process in Photoshop and in, in part 2 you will learn how to convert it to XHTML + CSS, and finally adding a fading hover effect with jQuery.

View the Tutorial »

GitHub-Style Buttons with CSS and jQuery (or MooTools, or the Dojo JavaScript)

GitHub-Style Button Tutorials with CSS and jQuery or MooTools, or the Dojo JavaScript

GitHub seems to understand that most repo sites are usually boring so they’ve spiced their site up with some catchy CSS and great JavaScript features. One tiny piece of the GitHub design that stands out above everything are the lovely basic buttons that they currently use.
In this tutorial you will learn how to recreate those GitHub-style buttons with a little bit of HTML, CSS, and JavaScript.

View the Tutorial »View the Demo »

Cross-Browser Rounded Buttons with CSS3 and jQuery

Cross-Browser Rounded Button Tutorials with CSS3 and jQuery

View the Tutorial »View the Demo »

jQuery Imageless Buttons a la Google

jQuery Imageless Button Tutorials a la Google

This jQuery plugin is an attempt to recreate Google's imageless buttons and prove that it doesn't take a whole team of engineers and an endless cycle of code revision and quality control (their own words) to pull this off.
These buttons automatically adapt to paddings and any 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.

View the Tutorial »View the Demo »

Animated “Call to Action” Button

Animated Call to Action Button

In this tutorial, you’ll find 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.

View the Tutorial »View the Demo »

Nice Menu : CSS Animation & jQuery Animate

Nice Menu : CSS Animation & jQuery Animate

With this button, there are two basic CSS techniques that you will need to know – opacity and how to widen the button. Opacity is an effortless technique since it is supported by CSS, while widening the button is a CSS only technique by increasing the button’s current padding. So, when the user mouseover the button you will add its padding to make it wide and decrease the button’s opacity when user click it. You will then add some jQuery animation to bring this "nice" pure CSS button to life.
With CSS the button looks nice enough, but with

View the Tutorial »View the Demo »

Skype-Like Buttons Using jQuery

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" And, in this tutorial you will learn how to create the same button using jQuery and some simple CSS.

View the Tutorial »View the Demo »

jQuery iPhone Style Ajax Switch

jQuery iPhone Style Ajax Switch

In this tutorial you'll learn how to make a simple ajax request using the functionality of the iPhone buttons to trigger a script to return a string based on whether the switch is on or off. You need to include the ‘jquery.iphone-switch.js’ file along with jQuery which is included in the download package.

View the Tutorial »View the Demo »

jQuery UI CSS Framework Buttons and Toolbars

jQuery UI CSS Framework Buttons and Toolbars

These buttons are 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.

View the Tutorial »View the Demo »

Simple "Call To Action" Button With CSS & jQuery

Simple "Call To Action" Button With CSS & jQuery

In this tutorial you’re going to create an effective 'call to action' button with CSS and some jQuery to help grab the user’s attention and entice them to click .

View the Tutorial »View the Demo »

Scalable CSS Buttons Using PNG and Background Colors (With added jQuery)

Scalable CSS Buttons Using PNG and Background Colors (With added jQuery)

With this tut you can learn how to build dynamic CSS buttons using PNG, transparency and background colors that will degrade nicely and supports full scalability (resizeable in all directions according to the font size and content).

View the Tutorial »View the Demo »

Create a Simple Interactive CSS Button with jQuery

Create a Simple Interactive CSS Button with jQuery

In this tutorial you will be creating a button that will replace the default submit button, that will degrade gracefully, animated withy jQuery and very very easy to implement.

View the Tutorial »View the Demo »

jQuery Glowbuttons

jQuery Glowbuttons

Download the Plugin »View the Demo »

Menu Buttons in 20 Lines of jQuery

Menu Buttons in 20 Lines of jQuery

View the Tutorial »View the Demo »

Button Hover Fading Transition with jQuery

Button Hover Fading Transition with jQuery

View the Tutorial »View the Demo »

Cursor Hover Plugin

Cursor Hover Plugin

This plugin lets you create a two-layer button with one layer that follows the mouse. This method allows you to create some very professional effects on your site. The example below duplicates the Windows 7 start bar button hover functionality.

Download the Plugin »View the Demo »

jQuery hashchange event

jQuery hashchange event

This plugin is, by design, very basic. If you want to add lot of extra utility around getting and setting the hash as a state, and parsing and merging fragment params, check out the jQuery BBQ plugin. It includes this plugin at its core, plus a whole lot more, and has thorough documentation and examples as well.

Download the Plugin »View the Demo »

iPhone Style Radio and Checkbox Switches using JQuery & CSS

iPhone Style Radio and Checkbox Switches using JQuery & CSS

View the Tutorial »View the Demo »

Fancy Radio Buttons With jQuery

Fancy Radio Buttons With jQuery

When a user clicks on a select button it initiates a click function in jQuery. The first action is to remove the highlighting on the old row. Then you find the radio button of the new selection and add a checked state to it. Finally you add a new style class on to the column which gives the visual impact that a selection has been made.

View the Tutorial »View the Demo »

Awesome CSS3 & jQuery Slide Out Button

Awesome CSS3 & jQuery Slide Out Button

The inspiration for this button comes from photoshop.com where Flash is used to create a nice slide out effect. This button does not behave exactly the same, but the effect is awesome. It does not use any images and uses the border radius property to make the rounded borders.
The button consists of three parts: a container, the little button and the longer button. The two inner parts have absolute positioning. With jQuery, you will enlarge the long button and change the colors of the small one.

View the Tutorial »

Author: (646 Posts)

Paul Andrew is the editor and founder of Speckyboy Design Magazine.

Comments