Perfect CSS Sprite / Sliding Doors Button

Big note here! Sliding doors is a pretty old technique. It had its time on the web, but it's probably not the smartest way to go these days. We have border-radius now and gradient backgrounds and all that, which unlock most of what we were trying to achieve back in the day of sliding doors.

But it's still fun to document how it works, so here it is:

<a href="#" class="button">
  <span>Sliding Doors Button</span>
.button {
  float: left;
  clear: both;
  background: url(RIGHT_SIDE.png) top right no-repeat;
  margin: 5px;
  padding-right: 20px;
  color: white;
  text-decoration: none;
.button span {
  background: url(LEFT_SIDE.png) top left no-repeat;
  line-height: 22px;
  padding: 7px 0 5px 18px;
  display: block;
.button:hover {
  background-position: right -34px;
.button:hover span {
  background-position: 0 -34px; color: #fff;

Which assumes graphics like these:

See the Pen Sliding Doors Buttons by Chris Coyier (@chriscoyier) on CodePen.


  1. User Avatar
    Brandon Setter
    Permalink to comment#

    Hey Chris! Glad you liked this! I was working on a website for Biola University and needed something beautiful that scaled… to make it easy for future updates to their sites – then presto this came out of my head! I sure hope this is something useful for more designers out there! Enjoy!

  2. User Avatar
    Permalink to comment#

    Hello Chris,

    Really appreciated this method as it works like a charm. However, there is 1 issue that keeps it from being 100% flexible…

    How can you get it to work with rounded corner buttons with a transparent background? What happens with me is the right side is fine, but the left side’s corner is transparent so the body of the button shows underneath the left corners…

    Do you have any solutions for this perplexing issue?


  3. User Avatar
    Permalink to comment#

    I guess not Chris?

    • User Avatar
      Permalink to comment#

      Hey Mark, your name is awesome! Anyway, that is the same problem I’m trying to find a solution to. If I figure anything out, I’ll post it here. Or if you already have, please do tell.

    • User Avatar
      Permalink to comment#

      Nudge it with relative positioning.

  4. User Avatar
    Permalink to comment#

    Anyone have an example of this using <input> tags of various types? I’m working on one but IE keeps messing up the alignment of the images.

  5. User Avatar
    Rian Wijaya
    Permalink to comment#

    Very helpful. Just like a light in the dark.

  6. User Avatar
    Joe DaSilva
    Permalink to comment#

    Not sure if this will help anyone, but if you need to center this button remove the float:left and change the two instances of display:block to display: inline-block. That way if you drop the button into an element that’s set to text-align:center it will center but maintain the proper width.

  7. User Avatar
    Kayzi DEE
    Permalink to comment#

    Great, its really helpful.

  8. User Avatar
    Permalink to comment#

    demo’s cool it’s the code that I need. thanks

  9. User Avatar

    Your site is SO VERY much what I need. Thanks for all of your help! Your instruction is clear, understandable and perfect!

  10. User Avatar

    Any idea how to center this button? It won’t center inside of divs or table cells.

  11. User Avatar
    Permalink to comment#

    Thanks for the tip. I use your site as a reference daily. Still, I can’t wait for better browser support so I never have to use this technique again.

  12. User Avatar
    Permalink to comment#

    Not working in IE8. When I hover over the right portion of the button disappears.

  13. User Avatar
    Permalink to comment#

    Perfect from first attempt

  14. User Avatar
    Karl Groves

    I think it is important for developers to understand that Links are not buttons

  15. User Avatar
    Permalink to comment#

    I like this post very much. Thanks!

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.