how to use css inheritance for button colors


Tags: css

Problem :

I've got a basic button style created. I want a blue version, and a gray version. the blue class selector and the gray class selector are never recognized, why not??

a.checkout-button {
    -webkit-transition:border-color 0.218s;
    background-position: initial initial;
    background-repeat: initial initial;
    border:0 solid #DCDCDC;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    color: #EEEEEE;
    display: inline-block;
    font-family: 'Arimo', Arial, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: normal;
    margin-right: 10px;
    padding: 4px 12px;
    position: relative;
    text-decoration: none;
    text-shadow: #FFFFFF 0 0 0;
    text-transform: uppercase;
}
a.checkout-button .blue {
    background: -webkit-gradient(linear,0% 10%,0% 70%,from(#4533A9),to(#202020));
    background: -moz-linear-gradient(linear,0% 10%,0% 70%,from(#4533A9),to(#202020));
}
a.checkout-button .gray {
    background: -webkit-gradient(linear,0% 10%,0% 70%,from(#4533A9),to(#202020));
    background: -moz-linear-gradient(linear,0% 10%,0% 70%,from(#4533A9),to(#202020));
}

and the html

<a class="checkout-button gray" id="cancel-btn" href="">Cancel</a>
<a class="checkout-button blue" id="express-checkout-btn" href="">Express Checkout</a>


Solution :

Change this line:

a.checkout-button .gray {

to this:

a.checkout-button.gray {

And change this line:

.a.checkout-button .blue {

To this:

a.checkout-button.blue {

Edit: the reason for this is that the correct css format is to string classes together with a . in between. If you leave a space, like this: a.checkout-button .gray, this will apply the style to any element that has the class gray INSIDE the a.checkout-button element.


    CSS Howto..

    How to give a javascript function and css style in struts2 property tag

    How to set the height with css to 100% and make it fluid?

    (some) background images won't show up in IE7 or IE8

    How can I apply CSS Mixins with native Javascript?

    How to achieve image changing on hover?

    How to align items of a list CSS/jquery

    How to create a ribbon shape in CSS

    How to make an item to appear for a short time (Either Javascript or CSS) [closed]

    Show/Hide Div's via | Save Scrollbar | Save State

    How NOT to combine all CSS into one file with SASS and bootstrap

    How do I prevent the element of an HTML5 form from moving slightly?

    How do i put an X on the right side of a block?

    How do I make a div with guide lines?

    How can I use AngularJS directive to apply css style for a string?

    How Do I Use Css To Select A Area Of Code

    CSS: how to make a span only as wide as its content

    How to fill vertical spaces between tiles in a grid system (Using CSS)

    How to toggle single element with this same class like another

    Browser sizing Ctrl +/- :: How to manipulate settings?

    How do I reduce the vertical space between list items in an unordered list?

    how i can fit text to an image with css

    How to animate multiple elements at the same time?

    How to convert CSS into LESS when there are multiple classes using same properties

    How do I set frame alignment?

    Draggable elements in div show up behind drop zone when div is scrollable, need them to show in front

    How do I reduce the space between my menu titles and items?

    Show Feed in two columns in HTML

    How to pause css animation at orginal state

    Odd visual effect (little line shows) when hovering over button in browser

    How to use CSS sprites in table sorting headers?