Grow your CSS skills. Land your dream job.

Last updated on:

Perfect CSS Sprite / Sliding Doors Button

Demo

View Demo   Download Files

 

HTML

<a class=”GlobalOrangeButton” href=”http://yourwebsite.com”><span>So Neat!</span></a>

CSS

a.GlobalOrangeButton span {
  background: transparent url(’http://media-sprout.com/tutorials/web/CSSSprite-SlideButton/images/button_left_orange.png’) no-repeat 0 0;
  display: block;
   line-height: 22px;
  padding: 7px 0 5px 18px;
  color: #fff;
}

a.GlobalOrangeButton {
  background: transparent url(’http://media-sprout.com/tutorials/web/CSSSprit-SlideButton/images/button_right_orange.png’) 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;
  font-size:12px;
  font-weight:bold;
}

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

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

Reference URL

Comments

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

    THANKS!

  3. Mark
    Permalink to comment#

    I guess not Chris?

    • 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.
    Thanks…

  6. 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. Great, its really helpful.

  8. 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. Any idea how to center this button? It won’t center inside of divs or table cells.

  11. 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. I think it is important for developers to understand that Links are not buttons

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".