Styling the button element with sliding doors

Posted by Scott and Maggie on 05/23/2007

Topics:

NOTE: On April 27, 2009, we posted an update to the button styling technique described here; it now includes support for image sprites and IE 8. We recommend that you read the updated post: Update: Styling the Button Element with CSS Sliding Doors - now with Image Sprites and IE 8 Support.

Particle Tree recently posted an article describing a technique for styling the HTML button element. For those not familiar, form buttons are notoriously difficult to customize because they render differently across browsers and platforms. The typical solutions are to use the default button style that the browser provides, or use an image input, which may look fine but requires that you create a unique background image with text "baked in" for each type of button (i.e., "Enter", "Send message") and its rollover state.

While Particle Tree's technique works well, we needed a more flexible solution that accommodated a wider range of styles. We're often designing and developing complex applications with buttons that are styled with background images, background colors, icons, and sometimes a combination of all three. Ideally, our buttons would:

  • use the sliding doors method introduced on A List Apart,
  • allow us to use HTML text for the button labels so that we could reuse the same button style many times without having to cut unique images for each, and
  • do not require JavaScript for form submission or rollovers.

To meet these conditions we developed the following technique — a cross-browser method for styling button elements with sliding doors.

Examples

Each button shown uses the same markup and style — only the label text is different.

Demo page

Images & Markup

We cut two images for each state, default and hover (4 images total). The first pair form the left side of the button, the second form the right side.

Left corners:


Right corners:


(We'd like to convert these states into two sprites, where the default and hover state for each are burned into a single background image that is repositioned on hover. Initial testing for that idea yielded inconsistent results — if you have any success with this, please drop us a line.)

Button markup consists of a button tag around a span tag, and label text is written into the span. Both tags are necesary to support the two sliding door background images: the button tag's background image is shorter with right corners, and the span's background image is the larger with left corners. We found in our tests that it's best to cut the right image at least as wide as it is tall to avoid gaps between the doors.

And last but not least, the "submitBtn" class is assigned to the button tag (styles for the span tag are assigned with descendant selectors):

<button value="submit" class="submitBtn"><span>Submit</span></button>

CSS

button { 
  border:0; 
  cursor:pointer; 
  font-weight:bold; 
  padding:0 20px 0 0; 
  text-align:center; 
}
button span { 
  position:relative; 
  display:block; 
  white-space:nowrap; 
  padding:0 0 0 20px; 
}

/*blue buttons*/
button.submitBtn { 
  background:url(images/btn_blue_right.gif) right no-repeat; 
  font-size:1.3em; 
}
button.submitBtn span { 
  height:50px; 
  line-height:50px;
  background:url(images/btn_blue_left.gif) left no-repeat;
  color:#fff; 
}
button.submitBtn:hover {
	background:url(images/btn_blue_right_hover.gif) right no-repeat; 
}
button.submitBtn:hover span {
	background:url(images/btn_blue_left_hover.gif) left no-repeat; 
}

CSS for IE 6 and 7

We recommend referencing these in a dedicated IE stylesheet using conditional comments.

button { 
  width:auto; 
  overflow:visible; 
}
button span { 
  margin-top:1px; 
}

Supported Browsers

So far we've tested: IE 6, IE7, Firefox (Mac + PC), Safari, Opera, Camino

Caveats

IE 6 does not support the ":hover" pseudoclass on elements other than anchor tags. To get the hover to work in IE6, you'll need to duplicate the :hover styles and assign them a class name, and then script a function to toggle that class on/off.

Credits

This technique was motivated by the Particle Tree article Rediscovering The Button Element. The "width: auto;" workaround for IE is a technique we discovered at Jehia.cz.

Book cover: Designing with Progressive Enhancement

Enjoy our blog? You'll love our book.

For info and ordering: Visit the book site

Comments

thank you

Comment by komik on 03/10  at  08:41 PM

First off, very nice post.

Second, I think your ATOM feed is serving the wrong URL in the feed item url. For example this post’s url is served as http://www.filamentgroup.com/site/styling_the_button_element_with_sliding_doors/
instead of http://www.filamentgroup.com/lab/styling_the_button_element_with_sliding_doors/

It should only affect people trying to follow the link out of their feed reader, or folks like me who use the Google Reader Bookmarklet.

Comment by Mike Busch on 03/14  at  07:58 PM

@Mike: Thanks! It should be fine now.

Comment by Scott (Filament) on 03/17  at  12:01 AM

TIPS : adding css :

button:focus::-moz-focus-inner { border-color: transparent ! important; }

put away that dotted outline showed in firefox…

Comment by Nebz on 03/29  at  12:26 AM

I’d advice against the previously posted -moz-focus-inner tip. The dotted outline is an important clue when navigating without the mouse.

Comment by Thomas Thomassen on 03/31  at  05:00 PM

Very good thanks

Comment by dekorasyon on 04/03  at  03:35 PM

Thanks for this great post.

Though, one thing that’s kinda odd is the “not so similar” behaviour in Mozilla and Safari 3.1.

If I add a 10px padding to make the button look nice in Moz it somehow “breaks” Safari - resulting in odd paddings (ie left padding being bigger than right, although both are 10px). Anyone got an idea on how to solve this?

For now I will make the button look “good” in Mozilla because of its market share ;-)

But still, great approach. Thanks a ton!

Comment by sebastian on 04/11  at  11:44 AM

@Thomas Thomassen
True… but it don’t display well… only one part of the button is dotted… i would advice to add the pseudo-class :focus in css to have the clue without the semi-dotted button (tested in firefox only)

button.submitBtn:hover,button.submitBtn:focus {
background:url(images/btn_blue_right_hover.gif) right no-repeat;
}
button.submitBtn:hover span, button.submitBtn:focus span {
background:url(images/btn_blue_left_hover.gif) left no-repeat;
}

Comment by Nebz on 04/11  at  04:31 PM

@Sebastian—sometimes adding padding requires a bit of fine-tuning in order to work correctly across browsers.  The example buttons on this page look the same in Firefox and Safari, so If you post your markup/CSS or a link to an example page we may be able to help you debug.  (If you post markup as a comment, remember to encode your characters.)

Comment by Maggie (Filament) on 04/11  at  04:42 PM

How would one do this with an input type button?

Like this…

input type="button" value="SEARCH"

Comment by Veronika on 04/12  at  01:44 AM

This can’t be done with input type buttons… because you can’t set HTML in the value (this hack need a span in the value)

in <body> :
<form id=’myForm’ action=’blah.cgi’ method=’post’>...<button id=’submitButton’ class=’submitBtn’><span>Submit</span></button></form>

in <head> :
document.onload=function(){
document.getElementById(’submitButton’).onclick=function(){document.getElementById(’myForm’).submit()}
}

or with prototype framework (recommended):

document.observe("dom:loaded", function() {
$(’submitButton’).observe(’click’,function(){$(’myForm’).submit()});
});

Comment by Nebz on 04/12  at  10:54 PM

I used to skin the button as detailed in http://www.wakeim.com/view/dynamic-custom-form-buttons-with-css/. Here the right piece would not allow the click and moreover, the display:block / float:left put the button in a new line which could be painful in many a cases.

This workaround is superb.

Comment by Sridhar on 04/18  at  12:38 PM

Hi,

I’ve tried this great method for a couple of times and always run into the same issue that Firefox 2 renders the span element 1px lower that the button element. The same thing evens happens with the CSS shown here.  Any ideas?

This is not a serious issue if you are only building for FF2 and IE6 & 7 but if you need to support FF1 - 3, Opera 9 and Safari 3 (or even a wider range of browsers) this method turns into a nightmare of CSS hacks.

Unfortunately you don’t have a lot of choices when building an application with multiple languages and dozens of different forms. Using HTML-images is not an option…

Comment by Pirkka Rannikko on 05/21  at  08:45 PM

@Pirkka Rannikko - We’ve tested this method in Firefox 1.5+, Opera 9 and Safari 3 (among others) and have used it across a number of different web applications, and we aren’t seeing any issues in those browsers.  Is it possible that other styles are cascading and effecting how the buttons render in your site/app?

Comment by Maggie (Filament) on 05/21  at  11:14 PM

@Maggie (RE: Pirkka) I have the same issue. Very frustrating. Have rectified by setting top:-1px; - for some reason this does not affect IE7. I am using CSS sprites, though this technique doesn’t seem to work well in IE6. Haven’t quite perfected this…

Comment by Chris on 05/22  at  05:06 PM

Yes it is possible that my CSS reset could be causing some kind of a conflict. This needs to be tested to see if I am doing something wrong. We’ll see :)

Comment by Pirkka Rannikko on 05/23  at  03:13 PM

I am trying to using these button as link through and the problem I am having is that they work in Firefox but not in IE7.  Here is the code I am using

<div id="button-container"> <button value="submit" class="submitBtn"><span>Learn More Now</span></button></div>

Try it out on this link http://splashdev.smartcity.com

Comment by rich Costello on 05/23  at  07:53 PM

@rich Costello - the purpose of the button element is to submit a form.  The code example you provided shows “Learn more” navigation links, so you should be using anchor tags, not button tags.  (As a rule you should use either a button tag or an anchor tag; they should not be nested together.)

You can style anchor tags to look like buttons by using the sliding doors method, which would simplify your code to: <span>Learn more</span>.  To learn how to do this read the article posted at A List Apart: http://alistapart.com/articles/slidingdoors/

Comment by Maggie (Filament) on 05/23  at  08:36 PM

To all who have a problem with 1px span’s offset in firefox, the following sentence will solve this problem:

button::-moz-focus-inner { border: none;}

Comment by Axonian on 05/24  at  05:56 PM

For those having trouble with this approach, I strongly suggest you use Firebug or IE Developer Toolbar to see what font values, particularly line-height, you links and spans are inheriting. You may need to give you buttons and spans within buttons a different line-height to offset what they are inheriting.

As a side note, I use practically the same approach on ASP.NET for elements of type asp:linkbutton with a span inside the localizable string. I have also use one sprite and used background-positioning without any side effect as mentioned in the article. I’m curious to know or see what the issues you experienced were. I have used this method on site for large corporations, such as Microsoft, without a hitch.

Comment by Robert Biggs on 06/11  at  01:54 AM

css background examples , Properties , Attribute - - http://css-lessons.ucoz.com/background-css-examples.htm

Comment by arama motoru on 06/17  at  08:48 AM

css Cursor examples , Properties , Attribute - - http://css-lessons.ucoz.com/cursor-css-examples.htm

Comment by dos çalıştır on 06/20  at  01:14 PM

There is a small problem with this solution, at least in IE and Opera 8-9. These browsers change the rendering of a button when it’s pressed: any content of the button moves by 1px right and down while button background stays at the same place. So the sliding doors effect becomes not perfect on the pressed buttons. I had to insert additional SPAN element to solve this problem.

And does anyone have any ideas how to ‘fight’ the 3px side gaps (like some extra left and right padding) in all BUTTON elements in Firefox?

Comment by Ilya aka SelenIT on 07/01  at  09:10 AM

Its cool! Thank you!

Comment by Hess on 07/03  at  12:07 AM

@Ilya
The moving content issue was solved in IE6 and 7 when I declared position: relative; for the SPAN element. Didn’t help in Opera though.

And here is the bug related to the FF 1px displacement which was corrected by the fix suggested by Axonian: https://bugzilla.mozilla.org/show_bug.cgi?id=140562

Comment by Pirkka Rannikko on 07/22  at  02:58 PM

I also made a post about the Opera issue to their Dev Forums so lets see if get an answer sometime this year :)
http://dev.opera.com/forums/topic/243592

Comment by Pirkka Rannikko on 07/22  at  03:39 PM

Hello!

This is most interesting!  I couldn’t wait to try it. I was able to style it differently, but I’ve been losing my mind over a little problem concerning the alignment of the button element’s background image.

Strangely enough, it displays properly in IE7, but not in FF. 

Here’s my example: http://dev.ccdmd.qc.ca/monde/test2.html

As for IE6, it’s almost OK, but part of the hover state shows. 

I’ve been scratching my head for 3 days now and it’s driving me insane.  Perhaps my error is obvious to you?

Thanks a million!

Thanks!

-webfairy

Comment by webfairy on 08/03  at  06:34 PM

Thank you Axonian for your post!  I was able to fix the FF bug. It looks great!

Now I’m only left with a tiny IE6 glitch.  http://dev.ccdmd.qc.ca/monde/test2.html Ugh!!!!

Comment by webfairy on 08/03  at  07:13 PM

Thanks for this, worked as advertised on all the browsers :)

Comment by toolman on 08/19  at  01:59 PM

Hi, I liked your article so much that i made a button adapter for asp:button controls. So all of you .Net folks can have sexy buttons by default.

Check it out:
http://www.delphicsage.com/home/blog.aspx?d=238&title=Using_an_ASP.NET_Control_Adapter_to_Convert_Your_ASP:Button_Controls_to_Sliding_Doors_Styled_Button_Elements_

Comment by Brian on 08/19  at  04:38 PM

In IE6 & IE7, there is an odd behavior if you have the buttons in a table. It adds a proportionate amount of right side spacing, depending on how long your button label is.  It does not do this in FF.  I have played around, and in the IE conditional CSS, if you take out the overflow:visible, it aligns the button right, and the odd spacing is now on the left.  Any ideas where this is coming from?

Comment by Grady on 09/03  at  07:11 PM

i should of mentioned .. that when I put the buttons in an unordered list, and float the buttons, the invisible spacing isn’t there.  I would just rather not have to put them in a list every time I want to use the button. :o)

Comment by Grady on 09/03  at  07:46 PM

Is there a way to make it so that this doesn’t cause a newline?

Comment by JEn on 09/19  at  03:20 AM

@Ilya:

“And does anyone have any ideas how to ‘fight’ the 3px side gaps (like some extra left and right padding) in all BUTTON elements in Firefox? “

Found this fix after a lot of Googling:

http://www.sitepoint.com/forums/showthread.php?t=555417

Firefox was adding 3px around the outside of the button, which put all my alignment off, even in Firefox 3. The fix is:

button.button::-moz-focus-inner { padding: 0;}

Which will make the button align like any other inline element.

Comment by Ryan Cannon on 09/19  at  09:20 PM

I did find a fix for all these padding issues.  There is a small fix for IE6, and one for IE7.  In IE6, you need to make the width 1px, and in IE7, you need to make it 100%.  Now, that means that you will need to place the button in a div set to inline, or a table, or an li, otherwise it will go the width of your page.  See below.

<!--[if IE 6]>
<style>
button {width: 1px;}
</style>
<![endif]-->

<!--[if IE 7]>
<style>
button {width: 100%;}
</style>
<![endif]-->

Comment by Grady on 09/19  at  09:50 PM

Thanks, so easy and very nice :-)

Comment by Firefly on 10/17  at  05:56 AM

Great tutorial. Simple, but well worth it!

Comment by freelancer on 10/20  at  07:55 PM

Is there a similar solution to input submits?  Like:

<div class="submitBtn">
<input type="submit" name="Submit" value="Search">
</div>

Any help is greatly appreciated.

Comment by Tortuga on 10/24  at  02:07 AM

im using this on my site and it works very well

Comment by Phil on 11/14  at  07:38 PM

Great write up. You don’t know how glad I was to discover this after pulling my hair out trying to get properly styled buttons.

I was able to get the default, hover, and enabled graphic states to be all in one image. Thought I would let you know as requested.

http://louiswalch.com/beta/css_button/

What is really weird is I did not need the additional margin-top: 1px for IE. I tested it in IE6 and IE7 and it wasn’t required.

Comment by Louis W on 12/04  at  09:34 PM

Thanks !

Comment by SiMax on 12/08  at  10:48 PM

This is a great post, but does anyone know how you would disable the button? Once I apply images to the button, disabling no longer works properly.

Comment by Chris on 12/11  at  05:12 PM

This worked for me, when I clicked on the button it did not alert (because it was disabled)
<button disabled onclick="alert(’hello’);" type="submit"><span>Test</span></button>

I would suggest however that you add a class="disabled" to the button and style it differently then the other buttons on the page.

Comment by Louis W on 12/11  at  06:25 PM

Thanks Louis W, we agree that adding a class to style the disabled button differently is a good idea. This styling may be done most easily by simply setting the disabled state’s opacity to something around 30%, but you could use different images as well.

Comment by Scott (Filament) on 12/11  at  06:34 PM

button::-moz-focus-inner { margin-top: -1px;}
I add this to the style sheet and there is no gabs anymore in Firefox and in IE.

Comment by Vaida on 12/11  at  09:51 PM

In IE 7 + 8beta, something strange happens where if you are on the button, the slowly mouse over toward the right side of the button, the hover state for the button disappears while the hover for the span remains. For example, start with your mouse cursor in the middle of the button, then move to the right and about the time you reach the end of the word (i.e. “Submit") the button breaks.

Comment by Adrian on 12/14  at  10:14 PM

Well, I still think that in case of <input type="submit" blabla> you can use <a href="[removed] document.formname.submit blabla" rel="nofollow">. Surely you can use something similar for <input type="button">. And absolutely no problems with most of modern browsers (just imagine a div element filled with corresponded image ;) ).

Comment by FistFite on 12/19  at  05:50 PM

super… thanks :)

Comment by parça kontör on 12/20  at  10:12 PM

I have used the sliding door style for buttons but the problem in Ie 7 is that the text on button is disappearing while scrolling the page up and down.This happens when I use overflow:visible property.If I comment out this property then this problem resolves but the width of buttons becomes very large in IE6 and IE7

Comment by ANSHIKA on 01/06  at  07:28 AM

@ANSHIKA:  this sounds like the peekaboo bug, though it was supposed to be resolved in in IE7.  It’s documented here: http://positioniseverything.net/explorer/peekaboo.html.

IE assigns a width to buttons that we override using “width: auto; overflow: visible;”.  Removing that hack will make the buttons appear much wider than you’d like them to be in IE.  We haven’t seen the issue you mention in our own tests, so it may be the result of styles interacting on your page.  Thanks for bringing it to our attention, though, we’ll stay on the lookout for it.

Comment by Maggie (Filament) on 01/13  at  09:42 PM

@Louis W:  Thanks for posting your sprite beta test awhile back—great work!  We tested it locally and found that it worked like a charm in all browsers but IE (naturally).  IE required a couple of things: 

(1) the button states stacked in the sprite img must be separated by some vertical space, otherwise you’ll see part of your active/hover state hanging out below the button, and

(2) when we increased the font size above 10px, the sliding door imgs were offset and we had to resort back to using our negative-margin-on-the-span hack.  This gets complicated when the button is located in a layout with variable font sizing (em- or percentage-based, for example), where the margin value would also need to vary.  Hm.

We’re very close to making it work.  If you have any more ideas, please let us know!

Comment by Maggie (Filament) on 01/13  at  09:55 PM

@Magie. Very strange, I tested it on IE as well and did not encounter these problems. Drop me an email we can get it sorted out. Do you have an example of your try?

Comment by louis w on 01/13  at  10:01 PM

Works like a charm. Many thanks.

Comment by Trevor Saint on 01/28  at  01:52 PM

How can it be like this

Comment by çiçekçi on 02/17  at  05:25 PM

This technique is absolutely awesome - I’ve been using sliding doors, but I never got it to work right with the button element.

Yet I have a big problem: Somehow the above described padding-bug in firefox, were there seems to be additional 3px padding to the right also occurs in Google Chrome.

The Problem is, I don’t know how to explicitely fix it for chrome, as the padding is ok in safari

Comment by Kristof on 02/25  at  06:15 PM

This post helped me a lot recreating Gmail’s Custom Buttons, read more about it here: http://www.montysweden.com/2009/03/recreating-gmail-custom-buttons/ - didn’t manage to fully make it work on IE7, but maybe someone out there has a solution? Lots of credits to Louis W!

Comment by Monty on 03/07  at  04:10 PM

ANSHIKA is right! When you set overflow:visible to the input, the text disappears on page scroll. I experienced this several times with sliding doors backgrounds for submit input, and didn’t find a solution yet.
I’m not convinced is the pekaboo bug - whatever I do there (position:relative, zoom, etc) nothing happens, the text keeps vanishing and reappearing. The moment I take overflow:visible away, everything is OK (just the padding not!).

Comment by Robert on 03/12  at  03:02 PM

How does this one work for you?
http://www.webfixtech.com/blog/2009/03/css-based-button-element-makeover/
If you see the button looking funny, please let me know. Thanks.

Comment by Dragos on 03/13  at  07:29 PM

Very Cool! And so simple, thank you. I will use this tool!

Ed

Comment by Webprofi on 03/16  at  12:12 AM

its cool.. thank you. btw, i have that same problem too, its an IE problem i guess.. i was wondering how to overcome it.. in the meantime, i’ll try to explore this tool

Comment by bifold door on 03/19  at  12:48 PM

cOol.

Comment by evilmaple on 04/06  at  09:27 AM

For some reason, in this markup I am using :

--HTML---

<BUTTON onclick="submitForm(document.quote);return false;” class="submitBtn" href="#" priority="true">
<span>Quote</span>
</BUTTON>

--CSS---

BUTTON {
border:0;
cursor:pointer;
font-weight:bold;
padding:0 5px 0 0;
text-align:center;
}
BUTTON span {
position:relative;
display:block;
white-space:nowrap;
padding:0 0 0 5px;
}

/*green buttons*/
BUTTON.submitBtn {
background:url(images/gbutton-r.gif) right no-repeat;
font-size:10px;
}
BUTTON.submitBtn span {
height:30px;
line-height:30px;
background:url(images/gbutton-l.gif) left no-repeat;
color:#fff;
}
BUTTON.submitBtn:hover {
background:url(images/gbutton-r-hover.gif) right no-repeat;
}
BUTTON.submitBtn:hover span {
background:url(images/gbutton-l-hover.gif) left no-repeat;
}

the images are 30px tall.

Once applied the class and styles, it does not show up, just white..?
Any ideas?

I also have some other styles called input.button(styling the inputs) I am not sure if it is conflicting or not.

Comment by Nic on 04/07  at  01:43 AM

I would like to answer a comment that this is not a kinda odd also undoubtedly, this is a great work with lots of explorations. Kinda Great!

Google Money System

Comment by thegmsystem on 04/20  at  09:17 AM

Hi. Thanks for the article, but IE8 bug?

Comment by Jul on 04/23  at  04:26 PM

This is one of the amazing techniques to bring in clicks to that particular button and make the web page quite attractive and popular. It is also handy, because we don’t use javascript for form submissions and rollovers.

Comment by backlinks on 04/24  at  09:42 AM

I used these buttons, but now on ie8 I have a lot of problem. Please help.

Comment by Jul on 04/24  at  01:31 PM

:) nice

Comment by somebody on 04/26  at  04:11 PM

Just a quick note that we’ve updated our button styling technique:  “Update: Styling the Button Element with CSS Sliding Doors - now with Image Sprites and IE 8 Support” (http://www.filamentgroup.com/lab/update_styling_the_button_element_with_css_sliding_doors_now_with_image_spr/)

Comment by Maggie (Filament) on 04/27  at  04:46 PM

Nice attempt to make the site attractive and gives pleasant look. Good browser support and most importantly we don’t require complicated javascript for submitting forms and rollovers. Thanks for sharing this article.

Comment by acai berry on 04/30  at  12:38 PM

Great article.

A small point regarding accessibility/usability…

If the user has images turned off the buttons become unusable if the text color matches that of the parent container / page background. So it’s good to provide a background color explicitly in the CSS as a fallback. For example:

button
{
[...]
background: #f00 url("../img/btn_right.gif") right no-repeat;
}

Only problem is that this background then overflows by about 2px top and bottom beyond the background image in IE.

So, in the IE conditional styleheets(s), just unset the background color with

button
{
width: auto;
overflow: visible;
background-color: none;
}

It means that IE7/6 users still have the usability problem if they’ve got images turned off, but what can you do if they use a crap browser.
;)
For this technique to work in IE6 and 7 the background has to be transparent with the background color coming from the background images

Comment by Jonathan Schofield on 06/24  at  09:15 PM

Oops, someone please delete that final redundant para after the wink for me—and this comment!

Comment by Jonathan Schofield on 06/24  at  09:16 PM

Thanks for your post!
I thinks it’s the best way if we would like <button> tag.

But as you understand usually we use <input> tag in form elements, therefore I wish to suggest my method, based on own experience:
http://www.manakor.org/xhtml/cross-browser-sliding-door-input-button/

This gives us a compact cross-browser sliding door input button!

Comment by Nikita Sumeiko on 07/08  at  06:01 PM

@Nikita: Interesting approach. Thanks for commenting.

I agree that input elements are often used in place of buttons, usually due to some problems with the button element in some very old browsers, as well as a few not-so-old mobile devices. One thing we do to combat issues with the button element in these browsers is start with an input element on the page, and in capable browsers, we’ll use javascript to translate it to a button element (attributes, text, and all) and style away (we’ll probably post the code for automating this sometime soon...). This approach is particularly nice since the button element offers a meaningful outer container element for any presentational wrapper spans and such.

Your demo is interesting, and we do like the fact that it uses the same form element all along, simply wrapping it for presentation. The necessity for a duplicated text label seems a little fussy though, particularly for someone on a screenreader, who would hear the input text read aloud twice. You probably tried this already, but did you try setting background and border to ‘none’ while keeping the value text visible? That way the text wouldn’t need to be repeated in the DOM…

Also, there’s an update to this article now, found here:
http://www.filamentgroup.com/lab/update_styling_the_button_element_with_css_sliding_doors_now_with_image_spr/

thanks again!

Comment by Scott (Filament) on 07/08  at  06:23 PM

Nice work guys I am going to try this out…

Cross browser form buttons are such a pain in the rear, and IE 6 is still being used by some of our visitors.  But I usually dont even have to go further than IE 7 to get massive rendering differences, and many many people still use IE 7 :(

Comment by Melissa in LA on 08/07  at  05:41 PM

Ha ha Melissa, I got an error just opening up this page in IE 7.  The buttons look exactly the same though, they just dont react during the mouseover

Comment by Marc on 08/07  at  05:44 PM

It is not working properly in IE8.

Also when dealing with button tag in Chrome and FF, when you click in the button they remain static and work properly, but the same button in IE8 will have that ‘button press effect’ which is annoying. Do you know how to disable that effect and make it work equally in different browsers?

Comment by Rodrigo Bento on 08/31  at  11:28 PM

@Kristof, If you’re still listening ...
I had the same problem with a gap between the button bg image and the span bg image. Turns out the right part of the image in the sprite (if you’re using sprites) needs to be at least ~15px wide.

Not sure the exact width, but I was getting the problem when I had button { padding: 0 10px 0 0; } and button span { padding: 0 0 0 10px; }

Everything worked beautifully as soon as I increased the image width and bumped up the padding to button { padding: 0 15px 0 0; } and button span { padding: 0 0 0 15px; }

Hope that helps.

Comment by Karl Swedberg on 09/01  at  07:09 PM

I didnt get any errors on my webpage thanks a lot.

Comment by Burçlar on 09/23  at  08:02 PM

this button is cool! thanks a lot great job!!!

Comment by Celebs on 09/23  at  08:03 PM

cool buttons, I used them everywhere thanks

Comment by Eva Roob on 09/29  at  12:20 PM

coolll thanks

Comment by Manken on 09/29  at  12:24 PM

This is absolutely brilliant.  I had a go at styling my buttons some time ago and never had much sucess. And this technique doesn’t even need to use JavaScript.  Top stuff :)

Comment by eLottery Syndicate on 10/03  at  01:41 PM

that’s good。hehe

Comment by TATA on 10/09  at  10:04 AM

I’ve used the same technique & yet, can’t seem to get this button working.

Following is the code.

HTML:

<button class="submitBtn" value="submit"><span>FIND</span></button>

CSS:

button {
border:0 none;
float:left;
font-weight:bold;
padding:0 5px 0 0;
text-align:center;
}
button span {
display:block;
padding:0 0 0 5px;
}
button.submitBtn {
background: url(http://1.bp.blogspot.com/_n2MgRno9ego/SuBhkTvhOQI/AAAAAAAABzY/e-vT-ue3lCU/s400/btn_blue_right.gif) no-repeat scroll right center;
font-size:12px;
font-weight:bold;
}
button.submitBtn span {
background: url(http://4.bp.blogspot.com/_n2MgRno9ego/SuBhWyxWSQI/AAAAAAAABzQ/CQwjksaJsks/s400/btn_blue_left.gif) no-repeat scroll left center;
color:#FFFFFF;
line-height:25px;
}

Comment by vinod on 10/22  at  03:47 PM

Do these work in IE8, has anyone been successfull.

Comment by Offshore Seedboxes on 11/01  at  01:21 AM

without a hack? no it doesn’t. you gotta use the 2 css hack lines that have been provided in this article & adjust them according to your code.

Comment by vinod on 11/01  at  06:57 AM

very good work!  thx

Comment by sergey on 11/06  at  12:19 PM

Thanks Thanks very good

Comment by çiçek siparişi on 12/12  at  11:38 PM

I have found a way to use only 2 css sprites.
it looks PERFECT in safari
but… the problem of button is 1px lower than the button span, is still there..
(Chrome and FF)
IE? forget it…

Comment by Yoke Lee on 01/08  at  10:42 AM

Many thanks very cool

Comment by çiçekçi on 01/28  at  06:51 PM

Lots of thanx !!

Comment by anuncios on 02/23  at  01:46 AM

Hi, this no is one valid tag CSS!

Cool but i have one validation to html or css code return error.

--------

Hola, esto no es un CSS valido!

Buenisimo pero si hago una validacion de codigo html o css me retorna error.

Comment by Paulo McNally on 02/25  at  07:39 PM

Very useful code, i think i will include this in my projects as it makes really neat looking buttons.

Comment by essencial acai uk on 03/08  at  07:48 PM

It looks so pretty~~~Thanks a lot!

Comment by Suzvenus on 04/19  at  10:26 AM

I am having trouble getting my image of a nav tool bar to show up on a page I am working on. I am working on it offline and can’t seem to solve the problem.

Comment by arumib on 05/13  at  11:47 AM

Thank you for this great plugin! Very good
very good blog
maslak online order flowers

Comment by maslak çiçekçi on 05/18  at  05:03 PM

thanks for this article, i really like it… ;)

Comment by Surya Adi Sapoetra on 05/26  at  05:25 AM

Can anyone help me. I’ve created my own buttons and set them up using this technique, it’s great. How do I have them as an <a> instead of a button. I want the buttons to be links to navigate around a website. Please give me some advice or an example.

Thanks so much!

Comment by Darryl Young on 06/11  at  01:37 PM

Thanks very useful

Comment by film on 06/16  at  09:55 PM

very cool stuff.  Web browsing I have always said is 50% visual 50% back end programming.

Comment by Stephen on 07/23  at  09:56 PM

Hi,

I am using button tag and css class for that button. Css class contains back groud image. Now when I see that button in IE7 it looks fine. But when I scroll up & down my browser it shows some lines on button.

Anyone know any fix for this??

Thanks
hiral

Comment by Hiral Vyas on 07/30  at  06:56 AM

Work around if a button tag doesn’t work properly in IE when placed inside an anchor tag.

Comment by pradeep on 08/14  at  12:40 AM

Thanks Hi,

I am using button tag and css class for that button. Css class contains back groud image. Now when I see that button in IE7 it looks fine. But when I scroll up & down my browser it shows some lines on button.

Comment by metin2 on 09/05  at  01:58 PM

Thanks you

Comment by vakantie turkije on 09/05  at  01:59 PM

Thanks for the site having vibrant information about filament.

Comment by astuces pour miser en ligne on 09/29  at  12:02 PM

Thanks You.

Comment by Serra on 10/06  at  10:24 PM

Also when dealing with button tag in Chrome and FF, when you click in the button they remain static and work properly, but the same button in IE8 will have that ‘button press effect’ which is annoying.

Comment by basur on 11/02  at  10:58 AM

I am having trouble getting my image of a nav tool bar to show up on a page I am working on. I am working on it offline and can’t seem to solve the problem. .

Comment by sigara bırakma on 12/01  at  02:02 PM

Excellent tips .I really appreciate all these points, and I agree completely…
16

Comment by web tasarımı on 12/08  at  03:07 PM

Thanks Thanks Thanks!! :)

Regards,
Barry

Comment by Barry Diamond on 12/24  at  11:16 AM

Had the same issue here in FF with the span element offset vertically by 1px. Fixed it be changing the line-height on the form to 100%. The site’s BODY tag had a line-height of 180%. Can’t see any logical reason why this works but did in this case.

Comment by John Pitchers on 01/05  at  05:14 PM

This information is very useful for me. I have tried sliding doors method and i am really glad to learn it.

Comment by Davetiye on 01/14  at  03:06 AM

Thank you very nice info

Comment by arapça tercüme on 01/20  at  01:47 AM

This information is very useful for me. I have tried sliding doors in my <a href=http://realty.vlg1.ru/complex/flat>flat in Volgograd</a>.

Comment by Dmitry on 02/10  at  05:00 PM

This information is very useful for me. I have tried sliding doors in my flat in Volgograd

Comment by Dmitry on 02/10  at  05:03 PM

CSS used properly is like poetry! Great post.

Comment by catania airport car hire on 02/18  at  01:37 AM

I am happy to find this very useful for me, as it contains lot of information. I always prefer to read the quality content
tr

Comment by estetik on 02/18  at  03:59 PM

Extremely helpful.  Thanks for the many useful tips.

Comment by levaldigi airport car hire on 02/25  at  07:54 PM

very very helpful, awesome! Very well coded, documented and user-friendly.

Comment by stidged on 04/25  at  05:28 AM

very very extremly helpful.Very for the many useful tips

Comment by heryerde çiçek on 04/27  at  08:02 PM

is like poetry! Great post. very very helpful, awesome! Very well coded, documented and user-friendly.
CSS used properly is like poetry! Great post.

Comment by çiçek siparişi on 04/27  at  08:03 PM

I am happy to find this very useful for me, as it contains lot of information. I always prefer to read the quality content
tr

Comment by hosting on 04/27  at  08:05 PM

Oh wow that was helpful!  That will be a great feature to a website.

Comment by Peter on 05/03  at  11:24 PM

thank you nice article

Comment by olta bayrak on 05/04  at  12:48 PM

That is a beautiful effect, thanks for creating the tutorial, im gonna use it in my next project

Comment by Hosting Best on 05/10  at  12:47 PM

哇塞,很不错呀!学习了

Comment by 平 on 05/25  at  07:24 AM

EuthenicsLink Builders are Florida based Interior designing contractors has the ability to understand the needs of clients,
extensive knowledge of market, innovative design and easy access to resources and thereby world class
interiors in South Florida

Comment by Interior Buildouts on 06/02  at  04:09 PM

This is a beautiful effect i really lie it…

Comment by Dissertation help on 06/04  at  07:43 AM

Id rather use CSS3 to generate such effects,without the need for images. Check it out. Works for all form elements

example

input#user {
background: #F9F9F9 ;
background-position: 10px;
padding-left: 35px;

/*Borders and background color*/
border-radius: 6px;
-webkit-border-radius: 6px;
border: 1px solid #DADADA;

/* Shadows*/
box-shadow: inset 2px 2px 3px rgba(0, 0, 0, .15);
-moz-box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: inset 2px 2px 3px rgba(0, 0, 0, .15);

/*Font styles*/
font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
color: #747474;
font-size: 16px;
font-style: italic;

/*Spacings*/
margin-top: 5px;
height: 24px;
line-height: 24px;
width: 300px;
outline: none;
}

Comment by Aarav on 06/13  at  01:04 PM

thank you for sharing but i have problem in IE6

Comment by poipet on 06/16  at  10:13 PM

Thanks, everyone, for the feedback. We’re no longer taking comments on this post. 

We’ve since developed a newer technique for styling button elements, which you’ll find here: Update: Styling the Button Element with CSS Sliding Doors - now with Image Sprites and IE 8 Support.

Comment by Maggie (Filament) on 06/23  at  06:39 PM

Book cover: Designing with Progressive Enhancement

Enjoy our blog? You'll love our book.

For info and ordering: Visit the book site