CODEWITHSUNDEEP
htmlcssbutton
Meta
Meta

Reputation: 1860

Changing HTML button tag background color with css?

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?

Upvotes: 4

Views: 57255

Answers (3)

mecampbellsoup
mecampbellsoup

Reputation: 1511

For anyone that ends up here who, like me, wasn't sure how to change a button's background color...

Instead of this in your CSS file:

#footer_join_button {
  background-color: $light_green; 
}

... or even:

#footer_join_button {
  color: $light_green; 
}

... the correct attribute/property to target is simply background:

#footer_join_button {
  background: $light_green; 
}

Note: I'm using SASS precompiler, hence the potentially strange-looking $light_green variable above.

Upvotes: 1

Mitya
Mitya

Reputation: 34598

Your classes are looking for a button inside an element with a colour class. For example:

.red_btn button

...is looking for a button inside a parent element with the class red_btn. It should in fact be:

button.red_btn

...though the button part of the selector is probably redundant unless you have other elements of different types with the same class names.

Upvotes: 1

Seth
Seth

Reputation: 10454

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

Upvotes: 3

Related Questions