This article will show you how to create fancy buttons using CSS sliding doors technique. It is much better to use this technique than to use image buttons because you can apply the style to any link and at the same time you don’t have to create an image for each button. I posted this one on Morning Break weblog but due to its popularity I decided to publish it here.
What is sliding doors technique?
The technique is very simple. If we want to have a dynamic-width button, we have to find a way to stretch it horizontally. We will accomplish this if we create two background images that will define the button: one for the left side and one for the right side – like in the example below.
LEFT RIGHT
Smaller, right image will slide on the top of the larger, left image (that why it is called sliding doors). The more right image slides to the left, the narrower button will be and vice versa. The image below shows the technique.
Styling the button
First, let’s take a look at the HTML elements that will simulate button. We have <span> element within the <a> element. Span element contains left, wider image and text. The width of the text will determine the size of the button.
<a class="button" href="#"><span>Submit</span></a>
Now let’s take a look at the CSS code. We have a .button class that will be applied to <a> element and .button span class that will be applied to <span> element within <a> element. We also have .button:hover span that will change the font style within <span> element. And that’s all. Simple, eh? The comments in the code below describes each element.
a.button { /* Sliding right image */ background: transparent url('button_right.png') no-repeat scroll top right; display: block; float: left; height: 32px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */ margin-right: 6px; padding-right: 20px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */ /* FONT PROPERTIES */ text-decoration: none; color: #000000; font-family: Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; } a.button span { /* Background left image */ background: transparent url('button_left.png') no-repeat; display: block; line-height: 22px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */ padding: 7px 0 5px 18px; } a.button:hover span{ text-decoration:underline; }
The result will look like the examples below.
UPDATE 14.05.2008: You can see it “in action” on example page.
Cool post.
Very useful.
Thanks.
Nice example. I wrote a similar article as I wanted the button the enlarge when the font size is enlarged. You may check it out at
http://jedisthlm.com/2008/03/27/flexible-css-buttons/
Keep it up!
Can you please post a link with an example using this technique.
Nice tip there, I was wondering what if the button height is dynamic? Often browser image scaling is erratic and ugly, do you know any solution to smoothly design buttons where the height could be dynamic instead of fixed in CSS like yours…
Cool Buddy
Thank you. very useful.
Chandoo, yes, there is a way to make a button completely scalable by using "rounded corners" technique. Here are some links that might be useful:
http://www.redmelon.net/tstme/4corners/
http://tutorials.alsacreations.com/cadre/
http://www.sperling.com/examples/box/
@Cease, you can find the example here: http://www.jankoatwarpspeed.com/examples/CSS-Sliding-doors/
@Jens, very good article, thanks!
thx, good solution
Regards from Russia
Hi Janko,
The example you made is not working for me in Firefox and opera. Just wanted to inform you about this…
http://www.jankoatwarpspeed.com/examples/CSS-Sliding-doors/
Manu,
You are right about this. I didn’t try it in other browsers than IE. I’ll see what I can do.
Thank you for this information!
It’s because IE seems to ignore a syntax error you have in your css.
You’re closing the ‘body’ css twice with a ‘}’. Removing one of them makes it fine in FF and probably in all browsers.
Manu, you are right, I missed that. IE really ignores this error. I fixed the error on the example page.
Thank you very much! :)
good job. its useful. thanks.
very nice buttons, thanks
Nice article and very nice buttons. But try to test your CSS in "all" browsers like Firefox, Opera, Safari etc. In these day’s a lot of people left IE and are using other browsers instead.
Keep the good work.
Great sample and very useful!
Great tutorial. Thanks so much.
Re Lots of people leaving IE>
Have you checked your webservers stats?
I all of the sites we host, ie is over 90% of the market. (and it isn’t shrinking)
still alot of ie 6 (over half of ie – go figure) but firefox is a solid single digit.
Admitidly we look after sites that cater to the business to business crowd and not the artsy/linix sect but firefox seems to have less penetration than it did a year ago.
Opra less than 1% Netscape >.1%
It doesn’t stop me from trying to look after all the browsers, but the $$ investment to make a site all browser compatible isn’t always there. – and yes – I test in all browsers – on all os’s – interesting how going to mac or linix will effect firefox.. It would be nice if firefox has the same features (bugs) in all platforms.
Rob
PS .- I loved the article. Also the blogengine blog looks great! We used to use wordpress, but blogengine seems better and easier to customize! DOTNET Rocks.
- Martin, you are right. I do test in all browsers, but I had a small syntax error on the example page. However, the code in the example works in IE, Firefox and Safari. I didn’t test it in Opera :)
- Rob, when I make a summary of all of my sites I host, IE (both 6&7) is in a small advantage. But, it depends on content. Maybe the stats from [b]w3schools[/b] can help: http://www.w3schools.com/browsers/browsers_stats.asp
And I do agree: .NET ROCKS!
Oh wow. This is pretty nifty.
@Janko: You realise this was posted on A list apart about 5 years ago?
http://www.alistapart.com/articles/slidingdoors/
@rob lynch: Where do you get your figures from? I agree with Janko on this one; Depending on the site I think things sway a long way from IE these days. Just try googling for browser statistics and you’ll see what I mean.
Jon, I realize it has been posted not only on A List Apart, but on many other blogs as well. But I don’t see why this should stop me to write about this? You can find at least ten articles on any subject you choose. I don’t see whay this should be a problem?
Sliding doors technique is not a copyright of A List Apart. The code in this article is somethnig that I use for a long time in almost every project.
I hope you realize that you can’t be unique on web, but you can do things in your own way. I just visited the article on A List Apart – although technique is similar, buttons in this article are different from tabs they desribed.
Very nice article, thanks.
Nice. It is always good to put these sort of technics under the attention of your audience.
very nice. i will try it
@Janko: Sorry, that wasn’t supposed to be a dig; I just wanted to point out that there is something very similar over there. Bringing up old articles (and expanding on them) on sites that have new readership is definitely a _good_ thing! Personally I would stick some links to any other similar techniques though on the ground that more information is a good thing. Also, it’ll quite probably improve your search engine rankings if you provide links to similar articles ;)
You can be unique, but the chance to so is certainly very rare!
Weird… my post disappeared! This was what I was trying to say:
@Janko: Sorry, that wasn’t supposed to be a dig; I just wanted to point out that there is something very similar over there. Bringing up old articles (and expanding on them) on sites that have new readership is definitely a _good_ thing! Personally I would stick some links to any other similar techniques though on the ground that more information is a good thing. Also, it’ll quite probably improve your search engine rankings if you provide links to similar articles ;)
You can be unique, but the chance to so is certainly very rare!
Jon, I know that wasn’t supposed to be a dig. ;) I am big "fan" of linking out, I should have provide some other links here as well.
P.S. Comment moderation is turned on, so that’s why you didn’t see your comment after refresh. I had to turn it on bacause of spam. I try to approve all comments as soon as it is possible. Sorry for that :)
No problem :)
Thanks :)
Unofurtunatly tihs solution doesn’t work with input tags…
:(
@nulll: That is correct. Inputs are just not the kind of elements you can style this way. You can do it only with anchor html element or (in case of asp.net server controls) LinkButton and HyperLink.
Hi,
nice tutorial, but if you put a lot of chars in it. Than the image breaks.
(FF on linux)
@Jay: You are right. I think the width of a larger image is around 500px. If size of the text exceedes this size, button will break. If you need realy large buttons, you’ll have to make this image larger :)
@janko : I’m not much of an CSS expert, but if you make a left peace (rounded corners) and the middle is just a little peace of the mid of the image and let it repeat itself, you can make very long images with text on, or am I wrong here ?
@Jay: You can create such buttons im many ways. If you mean that left and right side should be fixed, and middle image repeated to streched content – answer is yes, this could be done this way. You can also use "rounded corners" technique which is a little bit different.
Sliding doors function in this way and the goal is to have a minimum of html elements. This way you just have anchor and span in it. Any other way will need more html elements.
Very useful bit of Information, bookmarked!
This is a beautiful exercise in css button design. Thanks for the tip.
so lame. why use 2 images instead of 1?
Trackback from DailyCoding.com
Links – Jun 02, 2008
Your Header Is Cool !
Always works well for me when I try it!. Great tutorial; thank you.
Nice tutorial – just what i needed ;)
PS:
guest on May 24. 2008 20:29 >
"so lame. why use 2 images instead of 1?"
One day you will learn. :)
i tried the tutorial and manage to get it to work! thank you.
Great and simple to understand example, thanks!
I have a few links that I’m already using a class for the jquery plugin "thickbox" <a class="thickbox"…
how can I use this sliding door technique and still use the thickbox modal?
@Brian: I haven’t tried this but it should be easy: <a class="thickbox button"… Drop me a line if you have any problems
@Janko: That worked just like you said. I didn’t know you could stack classes like that. Thanks again for the post!
How can I use this techinque withou float, because I can not center button in table then?
Nice work.
In <em>some</em> cases, it could be simplified further through the use of just one long image, and <code>background-position</code>.
Great technique….thank you for working this out. I used your code and thought that there is no reason to use 2 pictures. You can use just one long picture and it works well.
Cheers
Thomas Herold
CEO Dream Manifesto
http://www.dreammanifesto.com
Thomas, I’m glad you found it useful. And, yeah, doing it with only one image actually works great!
Great and very clear explanation!
Thank you for taking the time to write this small tutorial.
Now I still need to find out how to make images shift so that I can use different colors in the buttons…
But this already was a GREAT help!
Cheers.
Cécile
thanks, nice buttons, very useful.
Do you have a rollover effect that works with this button?
Thanks
Elaine Mingus
Elaine, I didn’t have a time to extend it with a rollover effect :$, but simple :hover might help
Thanks for share us the great buttons!
Merci beaucoup !
Cool post…. nice explanation thanks…
nice one post..thanks…great tips
:D
Cool post…. nice explanation thanks…great one… :D
nice explanation thanks…great one..8o|
Very nice article, thanks.
hot hot hot. great idea, i think ill have to use it.
I tend to do this with an external DIV with an inner A, works the same way – I like both these approaches because you don’t need much HTML markup for it to work.
THE PROBLEM with both these approaches though is that the outer element is floated to prevent it from stretching across the width of its container, as a result you can’t just turn any old link into a button as you will break the link out of the document flow and find it floating over to the left somewhere.
Has anyone found a neat way to resolve this without adding extra markup (as you can just wrap it all in another div etc and control that)?
wow great article. very useful. thx (K)
i tried and it work well, thanx very good tip :) and now i can do buttons more better.
VeRry cooll. thankss man. ;-)
Thanks very much – I have been looking around for a simple tutorial like this to follow, and the code included makes it perfect :D
I just love the tutorial, very simple indeed.
Thanks a lot man!, there’s a ton of great things here.
How do you get this method to work with IE6 and the PNG transparency bug fix using the filter:progid:DXImageTransform.Microsoft.AlphaImageLoader CSS trick? The right image placement gets broken. Thanks!
the codes works fine as long as the text is within the limit. And also you could complete the article with full menu implementation but the basic things works fine.
For the IE6 png fix, I tried using DD_belatedPNG, and it works with this method. The only issue is the images are loaded every time, never cached. Side effect of how the script works internally.
Is there a way to get opacity to work with this method on IE6? I tried using the "filter: alpha(opacity=XX)" method, but it doesn’t work. Any ideas?
Cameron Mauch: I really can’t think of anything at the moment. That’s exactly why I dropped the support for IE6 :)
Great tips, it make my site more attractive,
Thanks a lots:)
Thanks for tutorial..
great and useful post, simple and really straightforward. since as the sayin’ goes "sharing is caring", let me say THANKS for caring :-)
ciao!
Thank you for your post its very nice
Very usefull for me, Thanks
Thanks for the tutorial, the button looks great.
very nice Tutorial thank you very match
thank you
Hello!
I’d really like your work and want to use one of your buttons in a simple script. But have some problems (probably because I’m a noob :}), my submit buttons must do some onClick stuff… onClick="if(password1.value!=password2.value) { alert(\’Password missmatch!\’); return false; } else create.submit();"
Hmmm, can you help me? Probably I should do some JS function… :S
Thanks in advance and again good work! ;)
This is a very nice tutorial. Thanks a lot for the good work.
Cheers
amazing! it is very informative and useful. it will be a great help to everybody. keep up the good work
How do you align the button? I would like to center the button. Thanks again for providing this css code.
Nice guide. I’m gonna add these buttons to my clients webpage!
when i place your a href button between the p tag, the closing p tag doesn’t break to the next line.
very nice tip. I’ll use it. thanks.
P.C
how can i center the button? when i try, it stretches the width of the screen?
Hi, Thanks for this post.
I would like to adapt it to my needs.
In the Html I don’t want to create a new buton
<a class="button" href="#"><span>Submit</span></a>
But I would like to use the css for an existing button:
<input type="submit" value="<?php echo $VM_LANG->_(‘BUTTON_LOGIN’) ?>" class="button" name="Login" / >
Is it possible to do that? Can you write me the code to insert? I spent 1 hour on it without any success…
Thanks
Baden from France
Thanks so much for this article…it’s saving my life. I find it easier to understand then the A List Apart article since I’m totally wet behind the ears. I’m now following you on twitter. Keep up the great work!
Perfect! Just what I needed – nice and simple too for a newbie like me :D
Great article, thanks for the quick fix. Will definately be doing this. How about mouse over with css sprites?
This a great tutorial, and the sample buttons you have provided are great as well.
One thing I might recommend if you have time is to add a sample, with CSS, on how to do the sliding doors vertically. It’s really the same basic principles however I haven’t seen any tutorials for it outline. Just a thought..
Thanks!
This is a very useful tutorial. But when we work with Asp.net, how we can implement this for server buttons?
Can you help me ?
Well done, Janko!
Your method is very nice and working for me.
But usually we use input tag to submit some data in the form element, therefore I have posted a way, which is based on my own experience, on how to code cross-browser sliding door input button.
Please, have a look:
http://www.manakor.org/xhtml/cross-browser-sliding-door-input-button/
When I started to compare your method and mine, I see that they are not the same. And have you tested your button in all the major browsers?
I’ve got a lot of css code, which displays the button in all the browsers in the same way. [b]And I thinks we shouldn’t handle it, because it gives us a great result![/b]
My button, let’s call it the "sergio zambrano" submit button because I haven’t come up with a better name yet, hehe, it’s the same than this one, but with no extra markup, with a single image, and working for a SUBMIT button. Same transparent, same elastic, less code.
You can see it in the comment forms of my website at http://seosumo.com
Brilliant!
Elegant!
Thank you!
It was very useful to me.
Thank you for the post
nice example !!
thank
You had mentioned in the comments that this could be done with only one image.
How would you do it?
@Rock
Using 1 image would be easier in my opinion. I use this technique all the time for buttons, and I always use 1 image.
Instead of chopping the right hand side of the image off, leave it on and simply add "background-position:right;" to the "span" selector.
So, it would look this this;
[quote]
a.button span { background: transparent url(‘button.png’) no-repeat; }
a.button span { background: transparent url(‘button.png’) no-repeat RIGHT; }
[/quote]
nice example !!
thank
Very useful article! Thanks!