Make fancy buttons using CSS sliding doors technique

April 30, 2008

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.

Let's discuss this on twitter.

105 Comments

  • ASP.NET (May 10, 2008)

    Cool post.
    Very useful.
    Thanks.

  • Jens Wedin (May 12, 2008)

    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!

  • cease (May 12, 2008)

    Can you please post a link with an example using this technique.

  • Chandoo (May 13, 2008)

    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…

  • Munna (May 13, 2008)

    Cool Buddy

  • The Bloggers Times (May 13, 2008)

    Thank you. very useful.

  • Janko (May 13, 2008)

    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/

  • Janko (May 13, 2008)

    @Cease, you can find the example here: http://www.jankoatwarpspeed.com/examples/CSS-Sliding-doors/

    @Jens, very good article, thanks!

  • dmitry39 (May 13, 2008)

    thx, good solution

    Regards from Russia

  • Manu Temmerman-Uyttenbroeck (May 15, 2008)

    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/

  • Janko (May 15, 2008)

    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!

  • Manu Temmerman-Uyttenbroeck (May 15, 2008)

    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.

  • Janko (May 15, 2008)

    Manu, you are right, I missed that. IE really ignores this error. I fixed the error on the example page.

    Thank you very much! :)

  • önder (May 17, 2008)

    good job. its useful. thanks.

  • zakir (May 18, 2008)

    very nice buttons, thanks

  • Martin (May 18, 2008)

    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.

  • Yannis (May 18, 2008)

    Great sample and very useful!

  • Rainmaker (May 18, 2008)

    Great tutorial. Thanks so much.

  • rob lynch (May 18, 2008)

    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.

  • Janko (May 18, 2008)

    – 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!

  • Jenny (May 19, 2008)

    Oh wow. This is pretty nifty.

  • Jon Cage (May 20, 2008)

    @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.

  • Janko (May 20, 2008)

    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.

  • Andre (May 20, 2008)

    Very nice article, thanks.

  • Reynder Bruyns (May 20, 2008)

    Nice. It is always good to put these sort of technics under the attention of your audience.

  • sotec (May 20, 2008)

    very nice. i will try it

  • Jon Cage (May 20, 2008)

    @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 Cage (May 20, 2008)

    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!

  • Janko (May 20, 2008)

    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 :)

  • Jon Cage (May 20, 2008)

    No problem :)

  • Jad (May 22, 2008)

    Thanks :)

  • nulll (May 23, 2008)

    Unofurtunatly tihs solution doesn’t work with input tags…
    :(

  • Janko (May 23, 2008)

    @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.

  • Jay (May 23, 2008)

    Hi,

    nice tutorial, but if you put a lot of chars in it. Than the image breaks.
    (FF on linux)

  • Janko (May 23, 2008)

    @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 :)

  • Jay (May 23, 2008)

    @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 ?

  • Janko (May 23, 2008)

    @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.

  • Jeremiah (May 24, 2008)

    Very useful bit of Information, bookmarked!

  • niteworks (May 24, 2008)

    This is a beautiful exercise in css button design. Thanks for the tip.

  • guest (May 24, 2008)

    so lame. why use 2 images instead of 1?

  • DailyCoding (June 3, 2008)

    Trackback from DailyCoding.com
    Links – Jun 02, 2008

  • Babak (June 9, 2008)

    Your Header Is Cool !

  • Website Design (June 10, 2008)

    Always works well for me when I try it!. Great tutorial; thank you.

  • Gryet (June 10, 2008)

    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. :)

  • web design (June 18, 2008)

    i tried the tutorial and manage to get it to work! thank you.

  • brian (June 26, 2008)

    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?

  • Janko (June 27, 2008)

    @Brian: I haven’t tried this but it should be easy: <a class="thickbox button"… Drop me a line if you have any problems

  • Brian (June 27, 2008)

    @Janko: That worked just like you said. I didn’t know you could stack classes like that. Thanks again for the post!

  • Darius (July 1, 2008)

    How can I use this techinque withou float, because I can not center button in table then?

  • Egor (July 14, 2008)

    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>.

  • Thomas Herold (July 20, 2008)

    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

  • Janko (July 22, 2008)

    Thomas, I’m glad you found it useful. And, yeah, doing it with only one image actually works great!

  • Cécile (August 3, 2008)

    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

  • Eazzy | Web Design (August 8, 2008)

    thanks, nice buttons, very useful.

  • Elaine Mingus (August 13, 2008)

    Do you have a rollover effect that works with this button?

    Thanks

    Elaine Mingus

  • Janko (August 19, 2008)

    Elaine, I didn’t have a time to extend it with a rollover effect :$, but simple :hover might help

  • Virtual (August 26, 2008)

    Thanks for share us the great buttons!

  • Olivier (August 27, 2008)

    Merci beaucoup !

  • ASP Net Web Development (August 29, 2008)

    Cool post…. nice explanation thanks…

  • busby seo challenge (August 30, 2008)

    nice one post..thanks…great tips
    :D

  • kabonfootprint (September 8, 2008)

    Cool post…. nice explanation thanks…great one… :D

  • laptop cases (September 21, 2008)

    nice explanation thanks…great one..8o|

  • voyance (September 24, 2008)

    Very nice article, thanks.

  • internet fax (October 3, 2008)

    hot hot hot. great idea, i think ill have to use it.

  • benz (October 6, 2008)

    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)?

  • tefly (October 10, 2008)

    wow great article. very useful. thx (K)

  • Bob S. (October 29, 2008)

    i tried and it work well, thanx very good tip :) and now i can do buttons more better.

  • Msn Nickleri (October 30, 2008)

    VeRry cooll. thankss man. ;-)

  • Caroline (November 4, 2008)

    Thanks very much – I have been looking around for a simple tutorial like this to follow, and the code included makes it perfect :D

  • VJPQ Directory (December 12, 2008)

    I just love the tutorial, very simple indeed.
    Thanks a lot man!, there’s a ton of great things here.

  • Cameron Mauch (December 19, 2008)

    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!

  • Kazi (December 22, 2008)

    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.

  • Cameron Mauch (December 23, 2008)

    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?

  • Janko (December 31, 2008)

    Cameron Mauch: I really can’t think of anything at the moment. That’s exactly why I dropped the support for IE6 :)

  • cuocthiseo (January 6, 2009)

    Great tips, it make my site more attractive,
    Thanks a lots:)

  • Oyunlar (January 9, 2009)

    Thanks for tutorial..

  • marco (January 29, 2009)

    great and useful post, simple and really straightforward. since as the sayin’ goes "sharing is caring", let me say THANKS for caring :-)

    ciao!

  • cherooo (January 31, 2009)

    Thank you for your post its very nice

  • rumax (February 6, 2009)

    Very usefull for me, Thanks

  • cod4 hacks (February 9, 2009)

    Thanks for the tutorial, the button looks great.

  • gagner de l’argent (February 13, 2009)

    very nice Tutorial thank you very match

  • Lida Dai Dai Hua Jiao Nang Seo Yarışması (February 15, 2009)

    thank you

  • k07ka (February 21, 2009)

    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! ;)

  • Simulateur de pret (February 26, 2009)

    This is a very nice tutorial. Thanks a lot for the good work.

    Cheers

  • zenaida (March 6, 2009)

    amazing! it is very informative and useful. it will be a great help to everybody. keep up the good work

  • jose (March 17, 2009)

    How do you align the button? I would like to center the button. Thanks again for providing this css code.

  • Kia (March 25, 2009)

    Nice guide. I’m gonna add these buttons to my clients webpage!

  • Robert Lee (April 10, 2009)

    when i place your a href button between the p tag, the closing p tag doesn’t break to the next line.

  • clifford (April 11, 2009)

    very nice tip. I’ll use it. thanks.
    P.C

  • Mike (April 29, 2009)

    how can i center the button? when i try, it stretches the width of the screen?

  • Baden (May 1, 2009)

    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

  • Tiffany (May 2, 2009)

    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!

  • Suzanne (May 23, 2009)

    Perfect! Just what I needed – nice and simple too for a newbie like me :D

  • matthew (June 4, 2009)

    Great article, thanks for the quick fix. Will definately be doing this. How about mouse over with css sprites?

  • Shay Howe (June 22, 2009)

    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!

  • Parmesh (June 26, 2009)

    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 ?

  • Nikita Sumeiko (July 8, 2009)

    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]

  • Sergio Zambrano (July 22, 2009)

    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

  • Clare (August 10, 2009)

    Brilliant!
    Elegant!
    Thank you!

  • Madhu (August 20, 2009)

    It was very useful to me.
    Thank you for the post

  • STK (August 23, 2009)

    nice example !!

    thank

  • Rock (August 28, 2009)

    You had mentioned in the comments that this could be done with only one image.
    How would you do it?

  • Craig (October 5, 2009)

    @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]

  • tracy (October 26, 2009)

    nice example !!

    thank

  • Silviya (November 15, 2009)

    Very useful article! Thanks!