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!
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:
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.
