Perfect CSS Sprite / Sliding Doors Button


View Demo   Download Files



<a class=”GlobalOrangeButton” href=””><span>So Neat!</span></a>


a.GlobalOrangeButton span {
  background: transparent url(’’) no-repeat 0 0;
  display: block;
   line-height: 22px;
  padding: 7px 0 5px 18px;
  color: #fff;

a.GlobalOrangeButton {
  background: transparent url(’’) no-repeat top right;
  display: block;
  float: left;
  height: 34px;
  margin-right: 6px;
  padding-right: 20px;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;

a.GlobalOrangeButton:hover span {
  background-position: 0 -34px; color: #fff;

a.GlobalOrangeButton:hover {
background-position: right -34px;

Reference URL


  1. 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. Mark
    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. Mark
    Permalink to comment#

    I guess not Chris?

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

    • Aaron
      Permalink to comment#

      Nudge it with relative positioning.

  4. Amidude
    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. Rian Wijaya
    Permalink to comment#

    Very helpful. Just like a light in the dark.

  6. 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. Kayzi DEE
    Permalink to comment#

    Great, its really helpful.

  8. tranh
    Permalink to comment#

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

  9. Lori

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

  10. Chris

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

  11. Mitch
    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. Avneesh
    Permalink to comment#

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

  13. khaled_webdev
    Permalink to comment#

    Perfect from first attempt

  14. Karl Groves

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

  15. HoPhuong
    Permalink to comment#

    I like this post very much. Thanks!

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.