Creating and Styling Resizable Buttons

Delicious | Digg | Stumble | Reddit | Subscribe to RSS Feed

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.

About the author:

cssglobe's image Designer, developer and a passionate standardista with huge experience in all types of front-end work. I've been featured on numerous css galleries including famous Css Zen Garden official list. Drop me a line if you have work proposition or if you'd simply like to say hello.
To stay in touch, follow me on Twitter.

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

Delicious | Digg | Stumble | Reddit | Subscribe to RSS Feed

Comments

Jon Hartmann on 4 Mar, 2008 wrote:

Since you are using 3 elements, wouldn't 3 images be better? One 1 px wide background and 2 end caps should do fine. I realize that there is more overhead in transferring the additional image, but I'd have to think that it would be minor compared to the cost of sending a 550px image vs a 1 px image.
cssglobe on 4 Mar, 2008 wrote:

The real reason I am using 3 elements is that I can't get rid of paddings that button element has (I will try to find a solution that eliminates 2nd child).
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:

well,
not that new ...

http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
cssglobe on 4 Mar, 2008 wrote:

That example is styling anchors - A elements. I am styling BUTTON element.
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:

I think it's great! I recently tried doing the same thing using only one child element and was pulling my hair out until I finally gave up. If someone out there can fix the padding issues and get it to work with only 2 elements, please post it here!
Christoph on 4 Mar, 2008 wrote:

why you are using element "em"?
Christoph on 4 Mar, 2008 wrote:

hmpf...

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:

Christoph, did you test that code? That's exactly what I was referring to when I said that I can't get rid of the paddings. Do you see the buttons ok (without ghost paddings) with the code you suggested?
Sarah on 4 Mar, 2008 wrote:

wow...this is really great! Thanks
Sasa Bogdanovic on 5 Mar, 2008 wrote:

If you need more than one submit button on the same form, it will cause problems in IE6 as it will not know which one was clicked. In that case, you are forced to use input type="submit" element. That is why the latter is my preference.

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:

Hmmz, 2003 Flashback: http://www.alistapart.com/articles/slidingdoors/

...

B!
cssglobe on 5 Mar, 2008 wrote:

Same answer I gave earlier, I am styling buttons not menu items, and I mentioned in the article that the techniques might be familiar. It's not the technique itself, it's how and where it is applied.
Dr. on 5 Mar, 2008 wrote:

Breaks after 2 browser text size increases (Mac FF 2.0)....doesn't seem like it's worth the extra effort in this example.
Belén on 7 Mar, 2008 wrote:

How can i make a rollover???Thanks in advance!!!
Jonas on 10 Mar, 2008 wrote:

Belen:
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:

Very Good!! Thanks
Andree on 12 Mar, 2008 wrote:

Hmm, seems to have a little glitch in firefox. I browse with my text size increased, and the button does not re-size, the text just slides off of it.
pozycjonowanie on 13 Mar, 2008 wrote:

cool
sw on 14 Mar, 2008 wrote:

this is what i m looking for.. tanks a lot!
Web Design Liverpool on 17 Mar, 2008 wrote:

Nice and simple - good for the beginner!
tom on 26 Mar, 2008 wrote:

Andree,
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:

now try this one: put the button u created aligned centered in a div if u can. If u find a solution please post it because is driving me crazy :)
agriturismo lazio on 7 May, 2008 wrote:

usefull tutorial
thanks :-)
Sam on 2 Jun, 2008 wrote:

Hi everyone,
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, put button type="submit" and I think you should be fine.
Sam on 2 Jun, 2008 wrote:

No. I still need help.
Sam on 3 Jun, 2008 wrote:

I put button type="submit"and this method does not work.
Aarabic on 11 Jun, 2008 wrote:

great tutorial
thank you
Frank Ditrich on 14 Jun, 2008 wrote:

This is what I'm looking for.. Thank You very much!
But submit button really wan't work correct :(
Cutebaby on 14 Jul, 2008 wrote:

what`s em? like span?
Darren Lovelock on 4 Aug, 2008 wrote:

I like it, shame that the text breaks out of the button though. Looks like someone ripped off your article - http://www.ajaxonomy.com/2008/tutorials/creating-resizeable-buttons-in-css
Starry Nebula on 26 Sep, 2008 wrote:

Thanks for the helpful infoon resizing buttons!
Raj on 31 Oct, 2008 wrote:

Your demo is not working in Firefox 3 browser...Any tweak needs to be done?
Emil on 3 Nov, 2008 wrote:

Right on the target Alen, great job.
Hvala,
Emil
Kane on 20 Jan, 2009 wrote:

Hi! Is there a way to make this button with 12x12px icon inside it, something like this:

<button><span><em class="delete-icon-atleft">icon here</em><em>Button text</em></span></button>
and
<button><span><em>Button text</em><em class="delete-icon-atright">icon here</em></span></button>

or

<a href="#"><span><em class="delete-icon-atleft">icon here</em><em>Button text</em></span></a> and
<a href="#"><span><em class="delete-icon-atright">icon here</em><em>Button text</em></span></a>
?

Sorry, further comments are disabled for this post.

Hey, you are not logged in!
Apply for a membership or login here.

Want to join?

If you wish to contribute with your own articles, updates or gallery entries you can apply for a membership and even become our editor.

Apply here

Css Globe