jQuery imageless buttons 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. I don't 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.

You should go check out swizec.com to find out about my other projects!

You should follow me on twitter Follow @Swizec

Supported browsers

These buttons have been tested to work properly on:

There are two known issues on Internet Explorer though. On activated buttons the right darker border disappears and onchange events are not fired because they don't work on noninput elements.

Examples

Alone Left (dumb)Centercheckedtell value checkboxtell 2nd value
Select value?Select ⇣ dropdown

HowTo Use

The buttons should be applicable on any element, although I've mostly tested with spans. Also, in order to preserve the semantic structure of your documents, all markup needed to render the buttons is nested inside the main element. To make a styled Button you basically just call the styledButton() function on it, however there are certain configurations available as explained below.

Requirements:

Code:

This plugin is also on github: http://github.com/Swizec/styled-button

		
		$(document).ready( function () {
			 // this is unfortunately needed due to a race condition in safari
			 // limit the selector to only what you know will be buttons :)
			$("span").css({
				 'padding' : '3px 20px',
				 'font-size' : '12px',
			});
			
			$("span.makeMeAbutton").styledButton({
			
				'orientation' : 'alone', // one of {alone, left, center, right} default is alone
				
				// action can be specified as a single function to be fired on any click event
				'action' : { 
							'on' :function () {
								alert( "You've turned on the button" );
							},
							'off' : function () {
								alert( "You've turned it off" );
							} 
						},
				
				'display' : 'block', // main element's display css, default is inline-block
				
				'toggle' : true, // is the button togglable, default is false
				
				'role' : 'checkbox', // one of {button, checkbox, select}, default is button. Checkbox/select change some other defaults
				
				'checked' : true, // display as a checked checkbox or not, default is false
				
				// checkbox values, default are on and off
				'checkboxValue' : { 
									'on' : "custom on!",
									'off' : "custom off!" 
								},
				
				'defaultValue' : "foobar", // default value for select, doubles as default for checkboxValue.on if checkbox, default is empty
				
				'name' : 'checkfield', // name to use for hidden input field for checkbox and select so form can submit values
				
				// enable a dropdown menu, default is none
				'dropdown' : {
						'element' : 'ul' // what nested element to use as dropdown, default is ul
						}
						
				'clear' : false // in firefox 2 the buttons have to be floated to work properly, set this to true to have them display in a new line
				
				'border' : 2 // use this if you're using a nonstandard border thicknes
			});
		} );
		
	

Changelog