Buttons in pure CSS3 or use image sprite

Question

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.

html:

<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>
</ul>

Now the CSS

ul#buttons-dev li{
    color:#FFF;
    font-size:10px;
    margin:4px 3px;
    height:15px;
    line-height:14px;
    text-align:center;
    width:15px;
    cursor:pointer;
    /*rounding-border*/
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border:2px solid #FFF;
    /*shaddow*/
    -webkit-box-shadow: 1px 1px 2px #33454E;
    -moz-box-shadow: 1px 1px 2px #33454E;
    box-shadow: 1px 1px 2px #33454E;
    /*select*/
    -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{
    display:none;
    font-weight:bold;
    font-size:14px;
    left:77px;
    position:absolute;
    top:18px;
    width:95px;
    text-align:center;
}
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{
    display:block;
}

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.

Answer 1

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.

Answer 2

"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.

BTW:

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{
    display:block;
}
/* is the same as */
#buttons-dev li:hover span {
    display:block;
}

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>?