<a href="#" class="button"><em>CLICK ME!!!</em></a>
.button{
border:none;
background:none;
padding:0;
margin:0;
width:auto;
height:31px;
overflow:visible;
text-align:center;
display:inline-block;
white-space:nowrap;
/* Here's the magic sauce
padding left is the space between the left edge of your button and your text
background is set to left top
*/
padding-left:22px;
background:url(../images/largeBtn.png) no-repeat 0 0;
}
.button em{
height:31px;
display:block;
margin:0;
color:#fff;
font-style:normal;
line-height:33px;
/* Here's the magic sauce
margin right is the radius of your rounded corner if you have one (so pngs don't show through behind)
padding right is the space between the right edge of your button and your text
background is set to right top
*/
margin-right:-3px;
padding-right:22px;
background:url(../images/largeBtn.png) no-repeat 100% 0;
}
Pingback: Tweets that mention Easy auto-width HTML button with 1 background image | Being the adventures of a young man whose principal interests are... -- Topsy.com
Thank you very much for this solution, it the far the greatest!!! I had tried other solution before, but this one is very cool! Thx some much for sharing!
Keep doing the great work!