SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help applying style to button

    Hi Guys,
    CSS isn't my strongest skill

    I'm having trouble applying a style that exists on the top of my page and using it in other places in my document. Here is a test site: http://bit.ly/WqoJ0e

    I'm trying to use the green button that says "View Pricing" and also apply the exact same styling (with different text) to the orange/gold button just below that says "Get Started Now"

    I tried applying the same class, but I think because it is not in the div it isn't working. Anyone have any suggestions? Greatly appreciated!

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I would create a single class for all buttons.

    You have the .button class, so I would use that as a base style for all buttons and then create additional classes for when you'd like to change certain features.

    So, instead of having something like #feature .button, which means that only elements with a class of .button that are children of #feature will get that style, have only .button in your CSS.

    And if you need a button style to be different, then add a new rule for that, e.g. a .register class, so that your CSS would look like:

    Code:
    a.button {/* general styles go here */}
    
    a.button:link, a.button:visited {/* general styles go here */}
    
    a.button:active, a.button:hover, a.button:focus {/* general styles go here */}
    
    /* === Register button === */
    
    a.register {/* add/alternate styles you want to change for this particular button so that these particular styles will overwrite your previous rules. */ }
    
    a.register:link, a.register:visited {/* ref. above */}
    
    a.register:active, a.register:hover, a.register:focus {/* ref. above */}
    And in your HTML you'd do this:

    <a class="button" href=""> for regular buttons and <a class="button register" href=""> for your register button.
    Maleika E. A. | Rockatee | Twitter | Dribbble




Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •