posted on:March 4, 2008

Creating and Styling Resizable Buttons


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:

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.

image

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.

Enjoyed the article?

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

DeliciousStumbleUpon RedditSubscribe

Comments (35 Comments)

  1. Jon Hartmann
    March 4, 2008

    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.

  2. cssglobe
    March 4, 2008

    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.

  3. hamlet
    March 4, 2008

    well, not that new ... http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

  4. cssglobe
    March 4, 2008

    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.

  5. Andy
    March 4, 2008

    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!

  6. Christoph
    March 4, 2008

    why you are using element "em"?

  7. Christoph
    March 4, 2008

    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.

  8. cssglobe
    March 4, 2008

    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?

  9. Sarah
    March 4, 2008

    wow...this is really great! Thanks

  10. Sasa Bogdanovic
    March 5, 2008

    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!

  11. Bramus!
    March 5, 2008

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

  12. cssglobe
    March 5, 2008

    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.

  13. Dr.
    March 5, 2008

    Breaks after 2 browser text size increases (Mac FF 2.0)....doesn't seem like it's worth the extra effort in this example.

  14. Belén
    March 7, 2008

    How can i make a rollover???Thanks in advance!!!

  15. Jonas
    March 10, 2008

    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

  16. Giovambattista Fazioli
    March 10, 2008

    Very Good!! Thanks

  17. Andree
    March 12, 2008

    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.

  18. pozycjonowanie
    March 13, 2008

    cool

  19. sw
    March 14, 2008

    this is what i m looking for.. tanks a lot!

  20. Web Design Liverpool
    March 17, 2008

    Nice and simple - good for the beginner!

  21. tom
    March 26, 2008

    Andree, If you set the width and height of your button using ems or % instead of pixels, your button will resize with the text.

  22. Romi Dumitrescu
    April 24, 2008

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

  23. agriturismo lazio
    May 7, 2008

    usefull tutorial thanks :-)

  24. Sam
    June 2, 2008

    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?

  25. cssglobe
    June 2, 2008

    Sam, put button type="submit" and I think you should be fine.

  26. Sam
    June 2, 2008

    No. I still need help.

  27. Sam
    June 3, 2008

    I put button type="submit"and this method does not work.

  28. Aarabic
    June 11, 2008

    great tutorial thank you

  29. Frank Ditrich
    June 14, 2008

    This is what I'm looking for.. Thank You very much! But submit button really wan't work correct :(

  30. Cutebaby
    July 14, 2008

    what`s em? like span?

  31. Darren Lovelock
    August 4, 2008

    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

  32. Starry Nebula
    September 26, 2008

    Thanks for the helpful infoon resizing buttons!

  33. Raj
    October 31, 2008

    Your demo is not working in Firefox 3 browser...Any tweak needs to be done?

  34. Emil
    November 3, 2008

    Right on the target Alen, great job. Hvala, Emil

  35. Kane
    January 20, 2009

    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, the comment form is closed at this time.