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?
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;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments