I want to know if it would be better to make an image for the buttons that I use, or can I get away with pure CSS. Ill give you the code.


<ul id="buttons-dev">
  <li id="button-plan">P<span id="text-plan">plan</span></li>
  <li id="button-develop">D<span id="text-develop">develop</span></li>
  <li id="button-host">H<span id="text-host">host</span></li>
  <li id="button-support">S<span id="text-support">support</span></li>

Now the CSS

ul#buttons-dev li{
    margin:4px 3px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border:2px solid #FFF;
    -webkit-box-shadow: 1px 1px 2px #33454E;
    -moz-box-shadow: 1px 1px 2px #33454E;
    box-shadow: 1px 1px 2px #33454E;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
li#button-plan     {background-color:#CE534D;}
li#button-develop  {background-color:#E2B842;}
li#button-host     {background-color:#64B6B1;}
li#button-support  {background-color:#B7CF79;}

ul#buttons-dev li span{
span#text-plan      {color:#CE534D;}
span#text-develop   {color:#E2B842;}
span#text-host      {color:#64B6B1;}
span#text-support   {color:#B7CF79;}

li#button-plan:hover span, li#button-develop:hover span,
li#button-host:hover span, li#button-support:hover span{

Note: I am using this on at least 8 parts of a single page.

That is why I want to know if it would be better to just use an image. Maybe I am overloading the DOM with all these elements.

Or can I just get away with is. I find this to be easier when I want to change stuff. Don't need to go into the whole photoshop/ftp etc.

  • 3
    If you're using it in several places in one page shouldn't you be using classes rather than ids? Commented Aug 16, 2011 at 13:51
  • Oh yes this was just a draft actually. But thank you for the comment. Commented Aug 16, 2011 at 19:59

2 Answers 2


Recently i stumbled upon an excellent article about CSS3 Gradient Buttons, and that gave me the kick to change to pure CSS instead of background images. The same style applies to different width's and height's of buttons and even adapt to the used font size. It can also be used on buttons as well as links and other elements.

I found it to be much easier to make changes, buttons can have a dynamic width, and you can reduce the number of files to download.

The only drawback i found so far is, that the rounded corners are not shown in IE. Version 10 of IE should be able to show them, but i could not test this myself.

  • Thank you for actually answering the question. You have made some good point, the same point I was thinking of. It is so easy to just use this, it's always a bit of a hassle with the image sprite. And everything works fine for me so far on IE9. Haven't checked other versions, but i guess it will be ok. I am using modernizr and selectivizr. Commented Aug 16, 2011 at 20:06

"Ill give you the code." Better would be a design-draft of your buttons…

Most often you will need buttons with variable length, which is done easier using pure CSS. This alone would be a decision on to CSS, in my opinion. Also using graphics, the loading time will increase.


span#text-plan {}
/* is the same as */
li#button-plan span {}
/* is the same as */
#button-plan span {}

li#button-plan:hover span, li#button-develop:hover span,
li#button-host:hover span, li#button-support:hover span{
/* is the same as */
#buttons-dev li:hover span {

Also it seems, like you want to have clickable buttons—so why don't you use <button> or <a> in your markup instead of <li>?

  • These are no clickable buttons. They are just rollover buttons to indicate certain things. And I am going to change the way I am writing the css. But the 2 are not really the same, the way I write it is a little stronger than the other way. But it's not really important. Commented Aug 16, 2011 at 20:03
  • As you use less selectors or use more specific selectors—this will increase the CSS parsing time…
    – feeela
    Commented Aug 17, 2011 at 10:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.