When structuring your markup there are many paths you can choose to reach the same goal. Most of the times it's a matter of preferences which element you wish to apply on a specific spot. I have my own personal preferences. One of them is preferring BUTTON over INPUT type="submit" elements. Why? Well W3C says it "Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities".
It's the rendering that I am after. You can easily apply image replacement techniques to buttons and make your form look good. Most interesting feature is that BUTTON element may have content. I will use that possibility in this tutorial.
So, the goal is to create and style button that can handle variable length so there is no need for later interventions. We'll treat button element as a container and add some markup.
Take a look at the demo | Download zip file
HTML
Here it is:
<button><span><em>Button text</em></span></button>
This is a valid code, and it gives us a lot to work with.
Please note, I am using two child elements instead of only one because I couldn't get rid of some paddings that button preserved. If anyone succeeds in styling with one child element only, please let me know :)
Concept
This concept is probably familiar to you from various navigation tab styling techniques. We have one long background image:
This one is 550px wide. I believe that is more than sufficient for buttons :)
So, we apply this image as a background image of a top element (in this case SPAN), place it to top left and add some left padding. Nested element (in this case EM) have the same background image but placed to top right and with right padding. As the content text grows so will the button.
Height of the button is fixed in my example but you can use similar technique and some more markup and place the same background image to all 4 corners.
To make sure that the text is vertically centered I use line-height property.
CSS
button{
border:none;
background:none;
padding:0;
margin:0;
width:auto;
overflow:visible;
text-align:center;
white-space:nowrap;
height:40px;
line-height:38px;
}
Resetting button's default styling.
button span, button em{
display:block;
height:40px;
line-height:38px;
margin:0;
color:#954b05;
}
Setting child elements. Note that value of height property is different than line-height. That's because I have 2px shadow at the bottom. Line-height vertically centers the text within the button graphic, shadow is excluded.
button span{
padding-left:20px;
background:url(bg_button.gif) no-repeat 0 0;
}
button em{
font-style:normal;
padding-right:20px;
background:url(bg_button.gif) no-repeat 100% 0;
}
Setting backgrounds and paddings for both child elements.
As I mentioned earlier, it would be more elegant if I could use BUTTON and SPAN only, but I couldn' t get rid of BUTTON paddings. Is any find a solution that uses only one child element, please let me know.
Designer, developer and a passionate standardista with large experience in all types of front-end work. Started to get involved with web in 1999. and turned freelance in 2005., the same year he started Css Globe. Alen's work has been featured on numerous css galleries including famous Css Zen Garden official list. Available for 
Jon Hartmann on 4 Mar, 2008 wrote:
cssglobe on 4 Mar, 2008 wrote:
That padding that remains on button element would even make your suggestion impossible because you wouldn't be able to place the corner image at pixel-precise spot.
hamlet on 4 Mar, 2008 wrote:
not that new ...
http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
cssglobe on 4 Mar, 2008 wrote:
If you read carefully, I also mention in the article that the concept might be familiar from various styling techniques.
The trick is to style FORM elements, which anchors are not, unless you add behavior to them.
Andy on 4 Mar, 2008 wrote:
Christoph on 4 Mar, 2008 wrote:
Christoph on 4 Mar, 2008 wrote:
CSS:
button
{
border: none;
background: url(http://cssglobe.com/lab/button/bg_button.gif) no-repeat left 0;
padding: 0 0 0 20px;
margin: 0;
width: auto;
overflow: visible;
text-align: center;
white-space: nowrap;
height: 40px;
line-height: 38px;
}
button span
{
display: block;
height: 40px;
line-height: 38px;
margin: 0;
color: #954b05;
padding-right: 20px;
background: url(http://cssglobe.com/lab/button/bg_button.gif) no-repeat right 0;
}
HTML:
Button without em.
cssglobe on 4 Mar, 2008 wrote:
Sarah on 4 Mar, 2008 wrote:
Sasa Bogdanovic on 5 Mar, 2008 wrote:
Apart from that, if you are not faced with such situation, you present another nice technique from your rich CSS arsenal :)
Pozdrav!
Bramus! on 5 Mar, 2008 wrote:
...
B!
cssglobe on 5 Mar, 2008 wrote:
Dr. on 5 Mar, 2008 wrote:
Belén on 7 Mar, 2008 wrote:
Jonas on 10 Mar, 2008 wrote:
button:hover span,
button:hover em {background: url(otherimage.gif);}
(worx in FF not in IE though.)
Better use js-library for hover fxs imo
Giovambattista Fazioli on 10 Mar, 2008 wrote:
Andree on 12 Mar, 2008 wrote:
pozycjonowanie on 13 Mar, 2008 wrote:
sw on 14 Mar, 2008 wrote:
Web Design Liverpool on 17 Mar, 2008 wrote:
tom on 26 Mar, 2008 wrote:
If you set the width and height of your button using ems or % instead of pixels, your button will resize with the text.
Romi Dumitrescu on 24 Apr, 2008 wrote:
agriturismo lazio on 7 May, 2008 wrote:
thanks :-)
Sam on 2 Jun, 2008 wrote:
I put this code
<a href="sign.html"><button><span><em>Button text</em></span></button></a>
or
<button> <a href="sign.html"><span><em>Button text</em></span></a></button>
When I click on either of these buttons, it does not go to sign page.
Can someone please help me out?
cssglobe on 2 Jun, 2008 wrote:
Sam on 2 Jun, 2008 wrote:
Sam on 3 Jun, 2008 wrote:
Aarabic on 11 Jun, 2008 wrote:
thank you
Frank Ditrich on 14 Jun, 2008 wrote:
But submit button really wan't work correct :(
Cutebaby on 14 Jul, 2008 wrote:
Darren Lovelock on 4 Aug, 2008 wrote:
Starry Nebula on 26 Sep, 2008 wrote:
Raj on 31 Oct, 2008 wrote:
Emil on 3 Nov, 2008 wrote:
Hvala,
Emil