Changing background color of HTML button tag using css?

Question

I use the HTML button tag for my submit buttons, as well as buttons that go to other pages and functions that I would like to have in order to have buttons with different backgrounds (one blue, one gray, one red, one green, etc. etc.), but it seems it cannot make it work by simply adding a button tag with its tag.

Here is what I still have HTML

<button class="green_btn" type="submit" name="cnp">News Control</button>

CSS

button {
    margin: 0 auto 5px auto;
    display: block;
    width: 134px;
    height: 35px;
    background: url('../images/darkgrey_btn_bg.png') no-repeat left;
    border: 0 none;
    font-weight: bold;
    text-align: center;
    color: #fff;
    cursor: pointer;
}
.grey_btn button {
    background: url('../images/darkgrey_btn_bg.png') no-repeat left;
}
.green_btn button  {
    background: url('../images/green_btn_bg.png') no-repeat left;
}
.ltblue_btn button {
    background: url('../images/ltblue_btn_bg.png') no-repeat left;
}
.blue_btn button {
    background: url('../images/blue_btn_bg.png') no-repeat left;
}
.red_btn button {
    background: url('../images/red_btn_bg.png') no-repeat left;
}

By default, I want the garkgrey_btn_bg.png button to be the background, but if I want to use green_btn_bg.png for the background, adding class = "green_btn" to the html does nothing.

Does anyone have any ideas?

Answer 1

.class-name button. .

...

button.grey_btn {
    background: url('../images/darkgrey_btn_bg.png') no-repeat left;
}
button.green_btn  {
    background: url('../images/green_btn_bg.png') no-repeat left;
}
button.ltblue_btn {
    background: url('../images/ltblue_btn_bg.png') no-repeat left;
}
button.blue_btn {
    background: url('../images/blue_btn_bg.png') no-repeat left;
}
button.red_btn {
    background: url('../images/red_btn_bg.png') no-repeat left;
}

Answer 2

. :

.red_btn button

... red_btn. :

button.red_btn

... button , , , .

Answer 3

, , , , , ...

CSS:

#footer_join_button {
  background-color: $light_green; 
}

... :

#footer_join_button {
  color: $light_green; 
}

... / - background:

#footer_join_button {
  background: $light_green; 
}

. SASS , , $light_green .