Styling Buttons and Toolbars with the jQuery UI CSS Framework

Posted by Todd and Maggie on 01/30/2009

Topics:

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.

We got lots of requests in jQuery UI discussion groups for ThemeRoller-ready buttons when we launched our most recent version of ThemeRoller, so we've created some button examples here that demonstrate how to incorporate the power of the CSS framework classes in a custom widget.

Below, we create a range of button types that frequently appear in application interfaces — stand-alone buttons, toggles, and buttons grouped into multi-function toolbars — and use classes from the framework to demonstrate how you can leverage the CSS for non-jQuery elements. We tested the sample markup and the framework CSS to ensure that styles render the same whether the button markup is the actual button form element (<button>), a link (<a>), or any other tag that makes sense for your particular application.

Examples

Click the gray button in the top right corner to apply a different theme:

Demo page

Built on the jQuery UI CSS Framework

In January the jQuery UI team rolled out a new jQuery UI CSS framework which provides a set of semantic classes that can be applied across a wide range of UI widgets. The framework works by stacking multiple classes on an element, some generic to the framework and others that are custom to each widget.

The generic framework classes fall into four basic types:

  • Interaction role classes - define the style attributes that affect look and feel: background image and colors for fonts, icons and borders. These classes are commonly used in many interfaces to style the header, content, click/mouseover states, error and highlight states. [Note: This is the part of the framework that corresponds to the primary levers that define a unique "theme" created in ThemeRoller.]
  • Rounded corner classes - apply rules for CSS3 corner-radius that match the radius set in the selected theme. There are individual class names for adding rounded corners to all four corners or just top, bottom, left, right or one specific corner. This CSS property is not supported in IE or Opera so these browsers will be square corners until they include support.
  • Interaction cue classes - make any element disabled or adjust the visual weight by tagging it as primary or secondary. All of these use opacity and font-weight shifts to leave the theme colors intact.
  • Helper classes - don't effect the visual design but are used to hide the element, add a clearfix, z-index fix or css reset to an element.

And finally, to style the widgets for a specific layout, we add our own unique set of custom classes:

  • Widget-specific classes - add structural style rules such as padding, margins, dimensions and floats that make the various components of a widget work together in a layout. These classes should never contain styles that apply colors or background images because these will override the interaction role classes and interfere with theming.

Note: Widget-specific classes classes are not included in the jQuery UI CSS framework; you add them to customize your layout by either appending them to the class attribute (next to framework classes), or for scoping framework classes to a specific element. In our examples, widget-specific classes all begin with "fg-", and framework classes begin with "ui-".

It's important to note that you can use framework classes on any site or with any scripting library — all you need is the /theme/ folder created by ThemeRoller and a link to the ui.all.css stylesheet in your page to use the framework. We feel that adding a bit of scripting adds a lot of power, as you'll see in this article, so we'll be using jQuery in our examples, but these styles are very "portable" and can be used anywhere.

Creating a basic button

Creating a basic button is very simple with the jQuery UI CSS framework. Let's say we start with a simple button or a link that needs to by styled as a button:

<button type="submit">Button</button>
<a href="#">Link</a>

To style these to look like a button, all you need to do is add the default "clickable" state by assigning the class ui-state-default. We also want these to have rounded corners, so we added the optional ui-corner-all framework class which adds CSS3 corner-radius properties to all corners without the need for any images or extra markup. [Note: this technique only works in Firefox and Safari, IE will display square corners unless you use a corner extension script]

<button class="ui-state-default ui-corner-all" type="submit">Button</button>
<a href="#" class="ui-state-default ui-corner-all">Link</a>

To globally control styling across all our buttons and add behavior later with Javascript, we also created a widget-specific class that isn't part of the UI CSS framework called fg-button.

<button class="fg-button ui-state-default ui-corner-all" type="submit">Button</button>
<a href="#" class="fg-button ui-state-default ui-corner-all">Link</a>

The jQuery UI CSS framework classes only apply look and feel style rules so our new fg-button class adds styles for margin, padding, positioning and other rules that make our new button widget look good in a particular layout. It's important to never specify any of the framework style attributes (like colors and background images) in your widget styles because these will override the theme styles. Your widget-specific styles and the framework styles should be written carefully to work together and so your widget will be themable. Here are the style rules for our fg-button:

.fg-button { 
   outline: 0; 
   margin:0 4px 0 0; 
   padding: .4em 1em; 
   text-decoration:none !important; 
   cursor:pointer; 
   position: relative; 
   text-align: center; 
   zoom: 1; 
   }

Scripting the hover and click states

At this point, we have styled buttons that look great and work on a range of html elements — buttons, links, spans, etc. The only missing part is visual feedback for rollover and click. These effects can be easily added by swapping the interaction role ui-state-default class with ui-state-hover on mouseover with some very simple jQuery scripting. We can add similar scripts to swap the class of a button to ui-state-active when clicked.

.hover(
	function(){$(this).addClass("ui-state-hover");},
	function(){$(this).removeClass("ui-state-hover");}
)

Setting button priority

Buttons in a typical user interface may need to be emphasized or de-emphasized to show priority. For example, in a dialog, you may want to visually emphasize the default button (Save) and de-emphasize the secondary button (Cancel). The CSS framework has interaction cue classes to set the priority to primary (ui-priority-primary) and secondary (ui-priority-secondary), which take the core theme color and backgrounds style attributes and automatically apply visual weight: primary priority sets the font weight to bold and the button to full color saturation; and secondary sets the button opacity to 70% to make it look a bit lower contrast than the primary button, and sets the font weight to normal.

<button class="fg-button ui-state-default ui-priority-primary ui-corner-all">Primary</button>
<button class="fg-button ui-state-default ui-priority-secondary ui-corner-all">Secondary</button>

Disabling buttons

The jQuery UI CSS framework also includes a disabled state class that prevents an element from appearing clickable and sets the opacity to 35%. By using opacity, the framework preserves the theme styling for the button but makes it appear to be dimmed out and unclickable. To make a button disabled, apply the ui-state-disabled class.

<button class="fg-button ui-state-default ui-state-disabled ui-corner-all">Disabled button</button> 

Adding icons to buttons

Included in the CSS framework is a full icon sprite containing a large set of commonly used icons. This set is colorized for each interaction state so icons can change color when hovered and clicked. Adding icons is easy — just add a span with a class of ui-icon which sets the icon dimensions to 16px. Then, apply a second class which name of the icon you'd like to use — for example, for a button with a "+" icon inside, you would use ui-icon-circle-plus. [Note: To see the full list of icons available, scroll to the bottom of the ThemeRoller page and hover over an icon to see its class name.]

<a href="#" class="fg-button fg-button-icon-left ui-state-default ui-corner-all"><span class="ui-icon ui-icon-circle-plus"></span>button</a>

In our examples we decided to show icons by themselves in a button or floated left or right next to a text label, so we created a set of widget-specific classes to handle the styling in these cases. For buttons with icons and text, we used fg-button-icon-left or fg-button-icon-right; and for buttons with an icon alone, we used the fg-button-icon-solo class.

Grouping buttons

Buttons are commonly grouped together visually in an interface. We created a widget-specific container class called fg-buttonset that we could apply to a set of buttons to logically group them together. This grouping container is used primarily as a way for us to apply floats and margins to the button set, but is also used to associate buttons that have shared behavior such as toggle and single select groups.

<div class="fg-buttonset">
   buttons go here...
</div>

Toggle Buttons and Toggle Groups

We created a set of grouped buttons that toggle to an active state when clicked by adding the widget-specific class fg-button-toggleable to buttons we wanted to toggle on and off. An example of this grouped multiple-toggle button is the bold, italic and underline formatting buttons in a word processor. To create this effect, we wrapped the buttons in a fg-buttonset container and attached an additional style of fg-buttonset-multi which added additional style rules and scripting to make the buttons look visually connected and individually toggle.

<div class="fg-buttonset fg-buttonset-multi">
	<button class="fg-button ui-state-default ui-corner-left"><b>B</b></button>
	<button class="fg-button ui-state-default"><i>I</i></button>
	<button class="fg-button ui-state-default  ui-corner-right"><u>U</u></button>
</div>

Single Select Buttons Groups

We also wanted to show how to allow one button to be selected at a time, so we created a class called fg-buttonset-single which adds a few style rules and scripting to apply the framework ui-state-active class to only one button at a time in the set. This acts like a radio button and is used for mutually exclusive options, like the text alignment options (left, center, right, justified) in a word processor.

<div class="fg-buttonset fg-buttonset-single">
	<button class="fg-button ui-state-default ui-priority-primary ui-corner-left">Visual</button>
	<button class="fg-button ui-state-default ui-priority-primary">Code</button>
	<button class="fg-button ui-state-default ui-priority-primary">Split</button>
	<button class="fg-button ui-state-default ui-priority-primary ui-corner-right">Preview</button>
</div>

Making a Toolbar

By taking a number of buttons organized into groups and placing them into a container with the CSS framework class ui-widget-header and a widget-specific class fg-toolbar, we can easily create a toolbar. The ui-widget-header class sets the toolbar borders and background texture and the fg-toolbar class adds a few rules to set padding, font sizes and margins:

.fg-toolbar { padding: .5em; margin: 0; width:50%; }
.fg-toolbar .fg-buttonset { margin-right:1.5em; padding-left: 1px; }
.fg-toolbar .fg-button { font-size: 1em;  }

Advantages of using this button technique

These buttons have a lot of advantages over traditional image-based buttons:

  • Clean, semantic markup - this technique will work with standard button and link elements with no additional spans or extra markup.
  • Scalable sizing - buttons gracefully adjust in size to accommodate changing font sizes and text that wraps to multiple lines.
  • Fewer background images - a single background image is used for each interaction state across the whole application (compared to sliding door buttons, for example, which require two or more images per button type).
  • Icon sprite set - the framework includes an extensive set of icons in a fast-loading sprite that can be used freely on any project.
  • Compatible with all modern browsers - tested in Internet Explorer 6 & 7, Firefox 2 & 3 (Mac & PC), Safari 3 and Opera 9.

Known Issues

For buttons that only contain an icon and no text label, you must either float or position the button to work in Firefox 2.

Book cover: Designing with Progressive Enhancement

Enjoy our blog? You'll love our book.

For info and ordering: Visit the book site

Comments

Thanks for the write-up. I’m sure this will be extremely helpful.

You said that, “We tested the sample markup and the framework CSS to ensure that styles render the same whether the button markup is the actual button form element (<button>), a link (<a>), or any other tag that makes sense for your particular application.”

I’m using Firefox 3.0.5 (Mac) and the ‘link’ and ‘span’ based examples have a different height to the ‘button’ example. They all appear to be the same height in Safari so this would appear to be a bug?

Comment by Alex on 01/31  at  06:25 AM

Very nice. Problem I’ve had is that some of these buttons don’t work quite right if you click on them and then move off them while button is down.

A normal HTML (or OS) button will revert state if you drift off the button. These get “stuck.”

Comment by Nosredna on 01/31  at  09:21 AM

@Nosredna - I haven’t tested this but I’m fairly sure that the problem you describe isn’t caused by the styling of the buttons but rather it is a result of the Javascript used in the examples.

The Javascript defines what should happen on ‘mousedown’ and ‘mouseup’ but does not define anything for ‘mouseout’.

Duplicating the ‘mouseup’ functionality for ‘mouseout’ should solve the problem you describe.

Comment by Alex on 01/31  at  09:32 AM

>>Duplicating the ‘mouseup’ functionality for ‘mouseout’ should solve the problem you describe.

It gets more complicated than that, because you should be able to go back into the button. I found this out the other day when trying to get it all working.

Comment by Nosredna on 01/31  at  09:53 AM

Hi,

I have try this, but for the button with icon (not use in this article :s) I have a strange behavior.
With this code (the same button, one with “a” and one with “button” tag

<button class="fg-button ui-state-default fg-button-icon-left ui-corner-all” type="button"><span class="ui-icon ui-icon-power"></span>Se connecter</button>
<span class="ui-icon ui-icon-power"></span>Se connecter
</pre>

The render is different and not ok on firefox, it’s ok on IE7, it is normal for you ? for fix this bug I have add this line button.fg-button-icon-left .ui-icon { right: auto; left: -1.5em; margin-left: 0; }</pre> and I have make an override for IE…
What do you think about this ?

Thanks for this article !
Séb

Comment by Plopix on 01/31  at  03:04 PM

Also noticed that on the a,button,span row - not only the button is a different height but it seems that the top position of the span is a few pixels lower than the other a and button buttons.  FF3.0.5 (Mac)

Comment by James Hughes on 01/31  at  03:52 PM

@Alex, @Nosredna: Thanks for pointing out the mouseout behavior. We’ll take a look and make edits this week.

@Plopix: We’ll take a look, thanks.

@everyone: Thanks for the feedback and nice comments. The differences you point out between heights of button elements and others may be difficult to address. Browsers seem to render text height + padding unexpectedly and differently when it comes to button elements. The span element is less of a concern, since it’s just there to demonstrate the classes applied to another HTML element (spans for clickable buttons are probably not a good idea if you have a choice).
It may be unlikely that you’d have button elements right alongside anchors in an app though, which might make this less of a problem. For example, a toolbar would probably use anchor elements, while form submit actions would likely use button elements.
Any ideas on how to even out the heights are greatly appreciated though!

Comment by Scott (Filament) on 02/02  at  12:29 AM

For having same sizes to IPUT, BUTTON, LINK you have to ajust Line-height and Paddings.

At studiVZ.net we are using Buttons and Inputs next to Links and have styled both as Buttons. It needs a lot of tweaking and a few Browserhacks.

I will have a writeup on my blog later this week. But here are some hints:

for Input we use a CSS like this:

background:#FF4040;
border: solid 1px #ee0000;
cursor:pointer;
font-size:11px;
padding:2px 6px;

a look-a-like but link uses:

background: #FF4040;
border: solid 1px #ee0000;
cursor:pointer;
font-size:11px;
padding:2px 6px;
text-align:center;
text-decoration:none;
white-space:nowrap;
line-height:25px;

Still there is a bug in IE as IE gives more padding left and right to Input and Button Elements the longer the value is. But you can’t fix this.

Comment by Sebastian on 02/02  at  03:10 PM

Thanks for the write-up, just what I was looking for.

I’ve noticed one little visual flaw on the button-sets though. The button borders doesn’t always go the whole way around when the button is hovered/clicked/toggled because of the negative margin used.

Adding the following lines of css fixes this, giving the buttons a more consistent look.

.fg-buttonset .fg-button.ui-state-hover { z-index: 1; }
.fg-buttonset .fg-button.ui-state-active { z-index: 2; }

The code works great with the most themes I’ve tried, but the z-index ordering might need changing if your current theme has a darker border for the hover-state than the active-state.

Cheers!

Comment by Jonatan Lundin on 02/02  at  09:01 PM

fg-button-icon-left, fg-button-icon-right and fg-button-icon-solo aren’t included in the css-files created by the jquery themeroller. Where can we find them?

Comment by John on 02/03  at  03:48 PM

Firefox 2 Fix: display:-moz-inline-box;

Comment by Ebrahim on 02/03  at  05:02 PM

@John:  All classes that begin with “fg” are widget-specific classes that we wrote in addition to the framework styles to customize our examples.  In order for the framework to be universal, it only controls color and background and leaves the structural styles that affect layout—dimensions, padding, margin, position, etc—open-ended so that you can tailor widgets to your particular project.  I realized this wasn’t entirely clear in the article, so we’ve edited to make this distinction more obvious—thanks for pointing it out. :)

If you’d like to see how our examples are structured, view the source of this page: http://www.filamentgroup.com/examples/buttonFrameworkCSS/.  Framework classes are all referenced in a stylesheet (theme/ui.all.css), and widget-specific classes add to or override them in a style block in the page header (in a real-world project, we would also put these styles in a stylesheet, but for demo purposes they’re listed in the page to better illustrate how they work).

Comment by Maggie (Filament) on 02/03  at  06:51 PM

Hello,

Can I ask how you did the drop down for the switching of Themes. Is that a jQuery plugin?

Thanks.

Comment by stefan.livens on 02/05  at  06:47 PM

@stefan: Yeah it’s actually jQuery UI’s theme switcher plugin. It’s a hosted script.  Just live-link to this script:
http://ui.jquery.com/applications/themeroller/themeswitchertool/

and call $(myelement).themeswitcher(); to append the switcher button to an element on the page.

It has options too but the docs site appears to be slow today - check it soon at http://docs.jquery.com/UI/Theming/ThemeSwitcher

View source on our demo if you want to see how we used it on that page.

Comment by Scott (Filament) on 02/05  at  07:11 PM

Thanks for the answer, but I was more looking for the plugin that is used to have a dropdown like this.
I’m looking for a plugin to replace the ‘normal’ select with something like this (custom html, images in the options, multiple line in the options,..). I’ve found a few plugin’s, but there is always something missing for me. And I thought maybe I have to ask which plugin you are using.

Comment by stefan.livens on 02/05  at  07:22 PM

@stefan: oh sorry, I misunderstood your question.

As far as custom select menus go, there are definitely jQuery plugins out there that will help you with that. We’ve actually built them several times but haven’t gotten around to posting an article about it the process yet. The challenge is making sure that whenever you’re replacing a native form control that your replacement component handles all of the functionality of the component you’re replacing (before enhancing it with more features). It also needs to communicate back to the select menu so the form can be submitted normally, similar to how this slider plugin works. These look pretty good at a glance:
http://www.givainc.com/labs/linkselect_jquery_plugin.htm
http://www.brainfault.com/2007/07/23/select-box-replacement/

We’ve begun integrating our menu component into jQuery UI and it should be included in UI version 1.7. That plugin will handle select menu mapping like you’re talking about, as well as a multitude of other cases such as fly-outs and iPod-style navigation (see http://www.filamentgroup.com/lab/jquery_ipod_style_drilldown_menu/).

Feel free to help us plan the component on the planning wiki here:
http://jqueryui.pbwiki.com/Menu

Comment by Scott (Filament) on 02/05  at  08:18 PM

sorry for souding stupid, but how do you add links to these radio buttons?

Comment by phaiza on 02/10  at  04:34 PM

@phaiza: I’m not sure I entirely understand what you mean, but I think you’d just want to use an [url="http://example.com"> element for the button and place your url in the href attribute.
<a class="fg-button"]button[/url]

Comment by Scott (Filament) on 02/16  at  08:32 PM

@Alex, @Nosrenda, @Scott

I’m playing around with these buttons, and added some javascript to fix the mouseout problem (I also added a click event just to make sure clicks were still recognized). It seems to be working great for me with regular buttons. All of the active/pressed highlighting works for links, but the click event is not fired if you mouse out and then in again.

I’m not using any of the toggle-style button right now, so I’ve not tested this against those.

You can find my javascript here: http://gist.github.com/65264

Feel free to make improvements to it (forking it would be great!).

Comment by Tobin on 02/16  at  08:49 PM

Hi there,

thanks for your hard work on this tutorial. But, I have a request - I have been looking hard now for 2 days, but I did not find a clear explanation on how to start out with JQuery UI / jQuery Themes (same thing?).

What I want to do is style my buttons like in this tutorial and also have the extended functions of jQuery.

I understood how to include the right Javascript files, but for the CSS it all looks like a big mess to me.

What do I need to include (minimum) to make this work?

Do I need themes for this?

I think your docs could use some work on the basic, canonized way how to make your html page ready for this tutorial.

Sorry for venting, but I am shocked there’s no explanation from the ground up. YUI has a Getting Started page for any module, together with a few basic examples. While I don’t like YUI, their docs are 2nd to none.

Cheers

Comment by Double Dip on 02/18  at  01:12 AM

@ Tobin: cool thanks! we’ll check it out.

@Double Dip: We’re working on a UI getting started guide, but using these buttons can be explained pretty simply. Just go to the UI download builder and grab a theme (or design one in themeroller first). You won’t need any of the UI components, just the theme.
Once you download it, you’ll have a theme folder containing your css and images. If you aren’t using widgets, you’ll only need ui.core.css and ui.theme.css. Link your page up to those files and include the CSS from our article above, and you’re good to go.

Comment by Scott (Filament) on 02/18  at  03:03 AM

Hi Scott,

thank you! That helped a lot.

As a follow-up question: Is it okay to use YUI’s Grids, Reset, Fonts, and Base CSS Framework together with a jQuery UI Theme? Do the jQuery UI Themes come with a CSS reset so to maximize browser compatibility?

Thanks again
D

Comment by Double Dip on 02/18  at  10:50 AM

@Double Dip: No, we don’t have a reset CSS in UI. One of our goals is to be unobtrusive on an existing site’s CSS and dropping a reset into a site that isn’t already using one can be a real headache to deal with.
We do try to reset styles within our widgets as best we can though, and our styles are scoped tightly to them as well.
We’ve tested against various frameworks including YUI and I think you’re pretty safe. Let us know if you run into problems with their base CSS though, as I’m pretty sure it styles most elements on the page globally.

Comment by Scott (Filament) on 02/20  at  02:05 AM

Positioning of icons in buttons aren’t working.
Adding the following works in FF3, but not sure about others:

button.fg-button-icon-left .ui-icon {left: -2em;}
button.fg-button-icon-right .ui-icon {right: 1.7em;}
button.fg-button-icon-solo .ui-icon {left: 0;}

Comment by David on 03/04  at  09:36 AM

Thanks for the nice tutorial! One caveat though: ui-state-disabled doesn’t seem to work with 3D-Buttons (those without a flat outline). While ui-state-disabled “greys out” the disabled button by decreasing it’s opacity, the button still changes its outline when clicked.

So it’s better to set the HTML ‘disabled’ attribute additionally to avoid visual inconsistency.

Comment by Franz on 03/04  at  12:17 PM

This is what I am looking for. Thanks a lot

Comment by Derek Zhang on 03/17  at  06:14 PM

this is so important that it should be in the official documentation

Comment by Valentino on 03/24  at  02:52 AM

@Franz:  you’re right, the classes only affect appearance, you’d need to disable the button to limit it’s functionality.

@Derek:  glad we could help!

@Valentino:  that’s the plan right now, to eventually roll these buttons (or a similar technique) into the official jquery UI library.  For now we’ll be sure to include this tutorial in the documentation if it’s not there already (thanks for the hint).

Comment by Maggie (Filament) on 03/24  at  03:45 PM

FYI for those trying to duplicate the examples:

On http://www.filamentgroup.com/examples/buttonFrameworkCSS/, some css from demoPages.css is leaking through to enable the examples to all work properly.

If you go through the JQuery UI downloader, the included CSS & JS files won’t be enough: you’ll need something to style the A-Href tags, otherwise they will appear unstyled as Times New Roman.

Comment by Jeff Meier on 03/26  at  01:36 AM

Hi! This tutorial is really awesome! IMHO there should be some kind of plugin so that you don’t need to add a lof of stuff to a link or button just to get “themable” please, take a look to this link http://slexy.org/view/s20hvkF1zb just to have an idea

Comment by Stuardo -StR- Rodríguez on 04/02  at  05:19 PM

Thank you, this is a great resource.

Just to add I have the same experience as David and Plopix.  In IE7 / Chrome an icon (span) in a button is okay.  In FF3 it renders but the icon is overlapping the text.

Comment by huey on 04/03  at  05:32 PM

This is a great pattern - very well thought-out. I’m going to reuse it for sure. Thanks!

Comment by Bohdan Ganicky on 04/07  at  04:53 PM

This is great stuff. Brilliant buttons, explained well with lots of nice examples. I had been having trouble getting buttons to work using the syntax/styling from the theme roller page. It would be great if you could do a follow up to this for the Highlight / Error classes.

The new CSS would be like:

.fg-message { outline: 0; margin:0 4px 0 0; padding: .4em 1em; text-decoration:none !important; position: relative; text-align: left; zoom: 1; }
.fg-message-icon-left { padding-left: 2.1em; }
.fg-message-icon-left .ui-icon { right: auto; left: .2em; margin-left: 0; }

The HTML examples, corresponding to those in the theme roller page would be:

<div class="fg-message ui-state-error fg-message-icon-left ui-corner-all">
<span class="ui-icon ui-icon-alert\">
Alert: Sample ui-state-error style.
</div>

<div class="fg-message ui-state-highlight fg-message-icon-left ui-corner-all">
<span class="ui-icon ui-icon-info">
Hey!  Sample ui-state-highlight style.
</div>

Comment by alistairh on 04/08  at  12:37 PM

@alistairh Are you interested in helping me creating a JQ Plugin to encapsulate this examples?

Comment by Stuardo -StR- Rodríguez on 04/08  at  04:20 PM

@Stuardo -StR- Rodríguez:  thanks for posting your plugin example for styling the buttons when JavaScript is enabled.  Could you post a couple of use cases? 

Re: creating a new jQuery plugin, an official UI button widget is in the works as documented on the jQuery UI dev and planning wiki:  http://jqueryui.pbwiki.com/Buttons.  It’d be great to get your feedback.

Comment by Maggie (Filament) on 04/08  at  04:49 PM

@Maggie I’m learning how to convert my code to a real plugin, right now, what it does is just to find all elements with the jqui-button class and convert them to a JQUI button.  A use case example could be converting a simple link to a JQUI button like this:

my simple link

or a submit button
<input type="submit" value="log in” class="jqui-button">

You can to a real example at http://develsystems.com/demo/scbfiles.com/

I’m working on the menu part, but it’s not so easy..

Comment by Stuardo -StR- Rodríguez on 04/08  at  06:35 PM

coming back to the issue of button’s height, why not to use span’s instead of buttons?

thank you for sharing and hoping to see more of this in new versions of jquery ui.

ahh… btw. why is not the theme switcher themable??? arghhh

Comment by Michael Moossen on 04/16  at  02:43 PM

Vle pelo post muito bom

Comment by Alexandre Broggio (Brasil) on 04/16  at  05:24 PM

i did use <a> instead of <button> and it works perfect! keep up the excellent work.

Comment by Michael Moossen on 04/17  at  12:18 AM

Great plugin, got it working but a few issues - Having this together with your ipod style flyout menu; there is clash of css i presume - in ff3 the buttons icons are not properly aligned. The css that david hinted

button.fg-button-icon-left .ui-icon {left: -2em;}
button.fg-button-icon-right .ui-icon {right: 1.7em;}
button.fg-button-icon-solo .ui-icon {left: 0;}

helps, but again it kills the layout in google chrome.
I tried changing the css in fg.menu.css to suit just the flyout but it did’nt help.

Any suggestions?

Thanks
Vru

Comment by Veeru on 04/21  at  04:23 AM

Exactly was I was looking for :-) Thanks, just wondering, how would you add an icon to a submit-button? tried it like that

<button class="ui-icon ui-icon-newwin ui-state-default ui-corner-all” type="submit" id="searchSubmit">Button</button>

but with that the text ‘Button’ is not shown and the icon gets wrapped to the next line

<button class="fg-button ui-state-default ui-corner-all” type="submit" id="searchSubmit"><span class="ui-icon ui-icon-newwin">Button</button>

didnt work either…

how would you do that?

Thanks
Gerald

Comment by Gerald on 04/23  at  05:11 PM

Firstly, a button element does not need a type attribute if being used to submit. Secondly, a span cannot be self closing. Thirdly, you need to specify the position of the icon by adding a fg-button-icon-{left|right|solo} class to your button element.

So what you want is:

<button class="fg-button fg-button-icon-left ui-state-default ui-corner-all” id="searchSubmit"><span class="ui-icon ui-icon-newwin"></span>Button</button>

Comment by David on 04/24  at  03:22 AM

Thanks David for your quick reply and sory for my late one. Was away for some days…

Hmm, ok the button doesnt need a type="submit". Submittting still works but now I dont get why ;-) How does the button know that it’s a submit button?

Ok, when I use your code, i get a big, square 2 line Box - one line with the icon, 2nd with the text. When I use it without text, the padding above the icon is still much to big. Guess the problem might be, that I miss the fg-button-icon-left class in my css.

Could you provide this class-code here?

Thanks and regards
Gerald

Comment by Gerald on 04/28  at  09:12 AM

Is there an easy way to get the height of a button and a link styles this way to match?

i.e. I am using a Save/Cancel combo where the cancel is just a link but the heights are different between the two.

Comment by Craig on 04/28  at  02:06 PM

Okay this looks quite amazing but I think I should read this again tomorrow whem I’m awake again :-)

Comment by Santhos Website Design on 05/04  at  11:47 PM

Hey, I love the look of all the buttons! I’m creating a poll, and I don’t want the boring look of the original radio buttons. I like how these ‘single select’ buttons work, but are they usable in a poll? I mean, I dont want to use them as links with url parameters, I need them to replace a hidden form or something, so they work exactly like a regular poll.

Comment by oakim on 05/31  at  03:42 PM

What would be the best way to pass the information from the “Radio button style toggle buttons set” to a back end language like php?

Would I have to assign a value to a hidden form field?

Comment by acollis on 06/02  at  04:54 AM

Hello,
Is it possible to substitute one’s one button graphics? With CSS...not editing the composite image file. I’d like to override a few of the default button styles and/or add new ones using my own images. I’m wondering how to code this?
Emma

Comment by Emma on 06/18  at  10:03 AM

Am rather new to Jquery and the issue I am having is that the fg-button I have on the page is super imposed onto a select box in the same page. Therefore, the user is not able to see all the options in the select.  This only happens on IE7. Everything works fine on Firefox.

Comment by crazyDiamond on 07/10  at  08:46 PM

How about mimicking checkboxes (as in another example on this blog) to look the same as these toggle-buttons? YUI got it but… YUI’s no jQuery :)

Comment by Carl Helmertz on 07/21  at  09:35 AM

Is there any chance you could just package the css from your sample page? As a total newb to jquery I’m having a lot of trouble duplicating the examples. It seems like there are stylesheets in the sample page that can’t easily be downloaded.

Comment by Tom on 07/30  at  03:36 PM

I have a button inside of a ui-widget-header styled div, and can’t seem to get the correct style to take precedent.

.ui-widget-header a (which makes the text white, on the light colored button background) is overriding the .ui-state-default, .ui-widget-content .ui-state-default class.

On the Theme demo page, there is a .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited class with the correct theme color, but its not being picked up…

Whats the secret to getting the button to theme correctly in a .ui-widget-header?

Comment by John Cole on 08/11  at  09:42 PM

i did use <a> instead of <button> and it works perfect! keep up the excellent work

Comment by صور للماسنجر on 08/16  at  01:59 AM

@alistairh Are you interested in helping me creating a JQ Plugin to encapsulate this examples

Comment by صور مسلسلات on 08/16  at  02:00 AM

@صور مسلس I’m interested in helping you. I already started creating the plugin. Please see my prev example

Comment by Stuardo -StR- Rodríguez on 08/17  at  05:43 AM

i have very strange problem.
i have this code:
<span class="ui-icon ui-icon-help"></span>Help

and after that i click on <a> link window jump on start of page. in your example window did not move.

Why?

Comment by Folks on 09/07  at  11:19 AM

<a href="#" class="fg-button ui-state-default fg-button-icon-solo ui-corner-all"><span class="ui-icon ui-icon-help"></span>Pomoc</a>

Comment by Folks on 09/07  at  11:20 AM

Thanks for your hard work on this tutorial. Everything works fine on Firefox.

Comment by Florin Web on 09/09  at  12:57 PM

For icons in the button (Mozilla FireFox, Chrome and Internet Explorer), try this:

in css, change:
.fg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }

to:
.fg-button .ui-icon { }

in your button, write:
<button class="fg-button ui-state-default ui-corner-all"><span class="ui-icon ui-icon-alert\"></span>Example</button>

type=’submit’ in button will be necessary for some forms to IE…

Comment by Joelson on 09/26  at  11:46 PM

... sorry, I forget, in your jquery-ui custom, you will need one more change, in:

.ui-icon {width: 16px; height: 16px; background-image: url(image.png); }

to:
.ui-icon {width: 16px; height: 16px; background-image: url(image.png); clear: right; float: left; }

Comment by Joelson on 09/26  at  11:51 PM

Buttons don’t work in IE6 when using jQuery UI Tabs in the same page.

Comment by Markus on 09/28  at  03:36 PM

hi, is it possible to add spacer in the toolbar? i wanted a group of buttons to appear far right and can’t fin a way to achieve this.
thanks in advance,
michal

Comment by michal on 10/22  at  04:38 PM

Is there anyway to get a button to be centered in a table cell?

Comment by Nathan Maves on 11/25  at  08:42 PM

This issue was raised in several comments, but I’ve yet to find a solution.  I need INPUT and A link to be the same height, as they reside in the same toolbar.  Sebastian alludes to having solved this, but I’ve yet to find a complete writeup on how to do this.

Has anybody been able to get INPUT and A to be the same height when putting them in a button-set inside a toolbar?

Comment by Brad on 12/04  at  01:48 AM

“We also wanted to show how to allow one button to be selected at a time, so we created a class called fg-buttonset-single which adds a few style rules and scripting to apply the framework ui-state-active class to only one button at a time in the set. “

Any chance on seeing the scripting? I cannot for the life of me work out how you created the toggle or the single select buttons. Very frustrating.

Comment by lee on 01/19  at  05:10 PM

thats the right way, great article

Comment by bigm75 on 01/22  at  11:11 AM

ui-state-disabled is not working on anchor elements for me, only the opacity is changed and the hover state still exists and it is still clickable. Am I missing something?

Comment by James on 01/27  at  06:40 PM

James - This doesn’t seem to work with jquery 1.3.2, try downgrading to 1.3.0

Comment by David on 02/04  at  02:11 AM

The buttons have been added to JQuery UI. They do rock!

See the example at
http://jquery-ui.googlecode.com/svn/branches/dev/tests/visual/button/default.html

Read more about them at
http://jqueryui.pbworks.com/Buttons

Comment by Stuardo -StR- Rodríguez on 02/04  at  07:01 PM

Easy to follow until you get to the fg-buttonset examples and stop showing the javascript. Had to view source to find out how to make it work. Seems like that should be a part of the jquery-css-ui.

This approach seems like it would be usable as a nav for a whole site, the only thing that is missing is a way to pass .ui-state-active to the same button on the target page. That way you could click on a link button and have it display as active in the new page. You could do it now by hardcoding an active button on each page, but of course most of us prefer to re-use an include for the nav instead of coding anything different on each page.

Does jquery provide a way that we could set ui-state-active for the link on the target page from the referring page?

Comment by photoshop_nerd on 02/19  at  11:47 PM

Hi, I tried using your example and css. I used this url http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css to link to. How ever, i cannot get the buttons to show color. They are a bland shade of grey color. How can i change it? Should i use a different css?

Comment by Ram on 02/27  at  08:16 AM

@Ram: Check out this blog post for links to the official jQuery UI themes on Google’s CDN:
http://blog.jqueryui.com/2010/02/jquery-ui-download-builderthemeroller-status/

Comment by Scott (Filament) on 03/01  at  09:57 PM

this is really so damn cool, it works perfect on Firefox

Comment by Nauman Akhtar on 04/01  at  02:41 PM

ertertertertertertertertert

Comment by teste on 04/02  at  03:31 AM

If you are looking to just get the icons to show in-line on the left or right then use ‘float:left;’ or ‘float:right;’ :

<div id="grpid_1" class="grp ui-draggable">

Grp1
[url="#"
<span class="ui-icon ui-icon-circle-close” style="float:right;"]
</span
[/url]

</div>

Comment by Nik on 04/05  at  01:28 AM

how do we check to see which buttons were pushed? I’d like to POST the pushed buttons values when a submit button is pressed. ideas?

Comment by ryan on 04/08  at  05:27 AM

Good work dear good

Comment by Raghib suleman on 04/22  at  01:01 PM

the theme is not applying on buttons when the buttons are in a cell of an html table

here is my page html code:

<html>
<head>
<link type="text/css" href="css/onlinebank-theme/jquery-ui-1.8.custom.css" rel="stylesheet" />


<style type="text/css">
/*demo page css*/
body{ font: 62.5% “Trebuchet MS”, sans-serif; margin: 50px;}
.demoHeaders { margin-top: 2em; }
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}
</style>
</head>
<body>

<div class="ui-state-default ui-corner-all">
<input type="submit" value="button1">
<table>
<tr>
<td>
<input type="submit" value="A submit button">
</td>
</tr>
</table>
</div>

</body>
</html>

Comment by Mak on 04/29  at  07:27 AM

@Mak: This technique is fairly dependent on the exact markup specified in the article. While it should work fine for buttons that are inside a table cell, we don’t expect it to work for buttons that have tables contained inside them (and we probably wouldn’t recommend doing that anyway). The markup you’ve shown has the button classes applied to a div that wraps a table and two input buttons. Instead, try applying the button classes directly to a button or anchor element. Hopefully that will fix your problem.

Comment by Scott (Filament) on 04/29  at  04:01 PM

i tried that also, still not working on the button inside a table cell

---------------------
<html>
<head>

<link type="text/css" href="css/onlinebank-theme/jquery-ui-1.8.custom.css" rel="stylesheet" />



<style type="text/css">
/*demo page css*/
body{ font: 62.5% “Trebuchet MS”, sans-serif; margin: 50px;}
.demoHeaders { margin-top: 2em; }
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}
</style>

</head>
<body>

<div id="switcher"></div>

<div class="demo">
<input type="submit" value="button1">
</div>

<table>
<tr>
<td>
<div class="demo">
<input type="submit" value="A submit button">
</div>
</td>
</tr>
</table>



</body>
</html>

Comment by Mak on 04/30  at  06:12 AM

very very good work, thank you. I think this will be in my next theme

Comment by Schalmei on 05/03  at  05:48 PM

In your examples you are using ‘float=left’ all other the place and it tend to ruin markup. Try something like “Label: [url="#">’ - your fg-button would float to the left of the ‘Label:’ !

Label: <a class="fg-button ui-state-default fg-button-icon-left ui-corner-all"]<span class="ui-icon ui-icon-circle-plus"></span>Previous[/url]

The official example is cleaner and unlike your examples actually works correctly: http://wiki.jqueryui.com/Buttons

Try:
Label: [url="#" class="ui-button ui-button-text-icon ui-widget ui-state-default ui-corner-all” ]
<span class="ui-button-icon-primary ui-icon ui-icon-locked"></span>
<span class="ui-button-text">Button</span>
[/url]

Note that it only uses standard classes. The “Label:” text actually stays to the left of the button, where it should. I’d suggest replacing your time-wasting examples with either the official documentation or link to the official wiki page.

Comment by Dmitry on 05/18  at  12:40 AM

To Brad’s question (and what is a FAQ) on getting input and A link elements styled the same height - the solution is simple - make the ui-button and input.ui-button the same line-height

If
.ui-button .ui-button-text { display: block; line-height: 0.8; }

then
input.ui-button { padding: .4em 1em; line-height: 0.8;}

Danny

Comment by Danny Lieberman on 06/01  at  07:43 AM

I want to use an image link within a jquery dialog. That is instead of text in a button , i want to use an image. Can anyone help me with this?

Is there a possibility of adding link component <a href > within a jquery dialog?

Comment by Anand on 06/24  at  07:42 AM

Thanks for making the info public!  You all are doing great work.

Comment by Jesse Beach on 07/02  at  05:55 PM

I am very new in jQuery and Rounded things etc, so it seems very difficult post for me.

I hope it will be very helpful.

Anyways, Thanks

Comment by Asif Iqbal on 07/29  at  07:39 AM

I have toolbar (having button drop down) with class ui-widget-header and I am trying to applying theme switcher. Somehow theme is not changing it, when I remove the ui-widget-header class, it works fine! Can anybody pls help me?

Thanks.

Comment by Arc on 08/09  at  09:05 PM

Very Cool! THX from Bosnia!

Comment by Web Dizajn on 09/01  at  06:54 PM

I have used your buttons with icons. Works great for <a> tags but if I use a <button> tag, the icon is placed on top of the text in Firefox (IE works fine in this case). This is my code:
<button class="fg-button ui-state-default fg-button-icon-left ui-corner-all” name="Submit" type="submit" id="Submit"><span class="ui-icon ui-icon-check"></span>Safe</button>
Can anybody please help me?

Comment by Edwin on 10/23  at  04:52 PM

Can anybody help me out?

jQuery("input:submit,input:reset,input:button").button();

this will apply jqueryui to all button,reset and input element on page. What if I want one exception in it?

I mean if i have three button on page, i don’t want jqueryui on one of the button and want it as normal button. How should i do that?

Thanks,
Vipul

Comment by vipul on 11/21  at  04:40 PM

A really, really useful post. I’ll be forwarding this onto my developers building my new travel site immediately!

Comment by Andrew on 11/27  at  12:57 PM

How to download this sample? I can’t get code to work by simply adding jQuery UI

Comment by Martin on 12/02  at  04:27 PM

Hi. I got the similar issue that Andrew had. The icon is always on the top of the text. But in my case, it renders the same on FF, IE7 and Chrome!

anyone who may know what it is ? Thanks

Comment by David on 12/18  at  07:01 PM

Nice toolbar! Thanks!

Comment by gdever on 01/13  at  04:56 PM

Nice toolbar and good tuto ;) I try this soon for my next project. I search too a good toolbar for menu ( bottom of page ) like social toolbar but with lot of option i can add after. I search this on google but i can not find good jQuery script. Do you know where i can find this ?

Thank’s and happy new year ;)

Comment by actumeet on 01/14  at  05:23 PM

Hi, thanx for this post, I present here a small extension for the javascript part:

$(".fg-button:not(.ui-state-disabled)")
.live(’mouseover mouseout’, function(event) {
if (event.type == ‘mouseover’) {
$(this).addClass("ui-state-hover");
} else {
$(this).removeClass("ui-state-hover");
}
})
.hover( ...

for the case if somebody need live event buttons.

Miklos

Comment by Miklós Bán on 02/05  at  12:47 AM

Nice work !! Thanks a lot..

Comment by Saurabh on 03/07  at  01:48 PM

Hi,
Button image could be change in real time?
Because we need to write options with images but some scenerios need set image in real-time (nobody know which icon will be setled before document ready.
thanks.

Comment by Nuri YILMAZ on 03/15  at  01:31 AM

Has anyone else come across a bug in Firefox with the button event handler? It seems that if you are a little sloppy with your clicking, that the javascript changes the class to change the physical presentation of the button, but the aria state doesn’t change. This results in the form more or less breaking.

If you can replicate the bug, a button will appear to be checked (checkbox version) but once the form is submitted, the value doesn’t get saved to the database as being checked. When you view the buttons again, it will be unchecked. The opposite case happens to where it will appear to be unchecked, submit form, view the buttons again the ‘broken’ one will be checked.

Once this bug occurs, you can confirm it by clicking on the button again and the state won’t change. Also when the bug occurs, in Firefox only the form cannot be submitted by pressing the Enter key.

I was hoping this would be fixed by updating from 3.8.7 to 3.8.11, but no luck.

Thoughts?

Comment by Uberschweiz on 04/20  at  07:43 PM

thanks, it work perfectly on firefox 4

Comment by alam on 04/29  at  03:49 PM

A plain and simple textlabel that can go next to a button would be a neat idea as well…

Comment by Daniel on 05/02  at  05:14 AM

Hi,

All of the themes are fine, keep going. if its possible write styles for Select list (Drop Down) ? Date with Time Picker too with same themes..

Bye

Comment by antony on 05/24  at  09:29 PM

Thank you for the detailed analysis of Themeroller, appreciate it. There may be a typo in this para: (...second class which ("with the”?) name of the icon you’d like to use.)
Adding icons to buttons

Included in the CSS framework is a full icon sprite containing a large set of commonly used icons. This set is colorized for each interaction state so icons can change color when hovered and clicked. Adding icons is easy — just add a span with a class of ui-icon which sets the icon dimensions to 16px. Then, apply a second class which name of the icon you’d like to use — for example, for a button with a “+” icon inside, you would use ui-icon-circle-plus. [Note: To see the full list of icons available, scroll to the bottom of the ThemeRoller page and hover over an icon to see its class name.]

Comment by fwsue on 06/01  at  09:06 PM

Thank you so much for this, I have been going nuts trying to understand ui-state-active on a drop down menu system in CSS but you cleared it up nicely for me Thank you once again.

Comment by Martin on 06/09  at  02:56 AM

thank you, you have given me a number of great ideas on how i can improve my web site and i will be doing these very soon. Have book marked your site and will visit again soon.

Comment by Amanda on 06/10  at  02:58 AM

Thank you so much for this, I have been going nuts trying to understand ui-state-active

Comment by megavideo en streaming on 06/13  at  08:57 PM

In keeping with accessibility, I am trying to make the buttons work on :focus as I see the .ui-state-focus within the css.  I am unable to see any markup making the buttons trigger?

Comment by Sanden on 06/29  at  09:46 PM

Commenting is closed for this post.

Book cover: Designing with Progressive Enhancement

Enjoy our blog? You'll love our book.

For info and ordering: Visit the book site