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/CSSSprit-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
Loading ...
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!
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!
I guess not Chris?
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.
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.