Changing HTML button tag background color with css?

button, css, html

Solution

You're targeting your class improperly with `.class-name button`. That is actually looking for an element with a child button.

Here you go...

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;
}

Problem

I am using the HTML button tag for my submit buttons as well as buttons that direct to other pages and features I would like to be able to have buttons with different backgrounds (one blue, one grey, one red, one green, etc) but can't seem to get it working by simply adding a class tot he button tag. Here is what I have so far 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 button to be the garkgrey_btn_bg.png as the background, but if I want to use the green_btn_bg.png for the background, adding class="green_btn" to the html does nothing. Anyone have any ideas?

Original source