How do you have coding for different kinds of buttons?

[mariko]

I have coding for one style of button, but I would like to add another kind of button. If the external CSS code for the first button is this, what coding would I add for the second button?

#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;
}

[TheServant]

I suggest reading up on CSS id's and names. What you have there is #button, which is referencing a button with the id='button'.
If you change that to class='button' then your CSS would be:

.button { ...

If you add a different ID or class to your second button, you can style it with:

.button2 { ...
/* OR */
#button2 { ...

Just remember, ID's are for unique elements (only one) whereas classes are for common elements.

[ansaripk]

#button1 a,
#button2 a {   
display: block;   
background:  url(rolloverimage.gif) top;
width: 63px;
height: 34px;  
}
#button1 a:hover,
#button2 a:hover {   
background:  url(rolloverimage.gif) bottom;   
width: 63px;
height: 34px;
}

[mariko]

@mariko
I ended up using all the code for a button, but instead of calling it a button I put in a different word. It worked. Is there any reason that I shouldn't do that?

[TheServant]

@mariko
The class and ID can be called what ever you want. Provided the ID is unique and there is no other element with that ID. There can me lots of elements with the same class.