How do you have coding for different kinds of buttons?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • mariko
    New Member
    • Mar 2010
    • 23

    How do you have coding for different kinds of buttons?

    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?

    Code:
    #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;
    }
    Last edited by Niheel; Jul 8 '10, 09:41 PM.
  • TheServant
    Recognized Expert Top Contributor
    • Feb 2008
    • 1168

    #2
    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:
    Code:
    .button { ...
    If you add a different ID or class to your second button, you can style it with:
    Code:
    .button2 { ...
    /* OR */
    #button2 { ...
    Just remember, ID's are for unique elements (only one) whereas classes are for common elements.

    Comment

    • ansaripk
      New Member
      • Jul 2010
      • 4

      #3
      Code:
      #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;
      }
      Last edited by Dormilich; Jul 9 '10, 05:31 AM. Reason: Please use [code] tags when posting code

      Comment

      • mariko
        New Member
        • Mar 2010
        • 23

        #4
        Originally posted by 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?

        Code:
        #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;
        }
        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?

        Comment

        • TheServant
          Recognized Expert Top Contributor
          • Feb 2008
          • 1168

          #5
          Originally posted by 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?
          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.

          Comment

          Working...