External Css Buttons

[mariko]

I can make a button, but I can't figure out how to put a different kind of button on my site. If this is my code for the first button, then how would I add code for another button with completely different styles?

#button a {
display: block;
background: url(rolloverimage.gif) top;
width: 63px;
height: 34px;
}

#button a:hover {
background: url(rolloverimage.gif) bottom;
width: 63px;
height: 34px;
}

[Lusiphur]

The beauty of CSS is that a style/class can be applied repeatedly to different items. The additional beauty is you can define as many styles/classes as you want to.

That being said:

#button_a {
    display: block;
    background: url(rolloverimage.gif) top;
    width: 63px;
    height: 34px;
}

#button_a:hover {
    background: url(rolloverimage.gif) bottom;
    width: 63px;
    height: 34px;
}

#button_b {
    display: block;
    background: url(rolloverimage.gif) top;
    width: 63px;
    height: 34px;
}

#button_b:hover {
    background: url(rolloverimage.gif) bottom;
    width: 63px;
    height: 34px;
}

Can be utilized by simply assigning "class="button_a"" or "class="button_b"" as needed to assign different styles to different buttons.

Edit: or y'know take out the "_"'s and you should end up with a,b,etc button types, I may be reading the original wrong because it's way too warm here and my brain's melted :P

Hope this helps :) Please mark as solved if it resolves your issue.

[diafol]

Just a quickie. The # (hash) sign denotes an 'id' attribute. If you're using classes, and I'd suggest this in this case, use the . (dot):

.button_a {
    display: block;
    background: url(rolloverimage.gif) top;
    width: 63px;
    height: 34px;
}
 ...etc...

Personally, I'd use css sprites for rollovers, altering the background image position for hover and active - as opposed to unique images for button states. My 2-penneth.

[Lusiphur]

Ya, sorry Ardav lol I've just been too darned warm here to think straight, I tried to compensate for it in my edit but... basically my point was you can use css classes in multiple varieties to alter the buttons :P

I think what I semi-realized after I posted (hense the edit) was that they may have been trying to create the buttons at the css level. Oh well, chalk it up to "Not one of Lu's better days" :P

Edit: Not that it matters as the OP hasn't gotten back to his own thread anyway lol

Edit 2: I think what happened there was I copy/pasted their original, and had been working a lot in background/div style CSS responses earlier, and just kinda ran with it... or something.