Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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.

share|improve this question
3  
If you're using it in several places in one page shouldn't you be using classes rather than ids? –  Peter Taylor Aug 16 '11 at 13:51
    
Oh yes this was just a draft actually. But thank you for the comment. –  Saif Bechan Aug 16 '11 at 19:59
add comment

2 Answers 2

up vote 5 down vote accepted

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.

share|improve this answer
    
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. –  Saif Bechan Aug 16 '11 at 20:06
add comment

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

share|improve this answer
    
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. –  Saif Bechan Aug 16 '11 at 20:03
    
As you use less selectors or use more specific selectors—this will increase the CSS parsing time… –  feeela Aug 17 '11 at 10:07
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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