用css改变HTML按钮标签背景颜色?

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.

我使用HTML按钮标签提交按钮和按钮,直接向其他页面和功能我想能够与不同背景的按钮(一个蓝色,一个灰色,一个红色,一个绿色,等等),但似乎无法让它工作,只需添加一个类合计他按钮标签。

Here is what I have so far HTML

这是我目前使用的HTML

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

CSS

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.

默认情况下，我希望按钮是garkgrey_btn_bg。png作为背景，但是如果我想使用green_btn_bg。png的背景，添加class="green_btn"到html什么都不做。

Anyone have any ideas?

谁有什么好主意吗?

3 个解决方案

#1

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

您正在用.class-name按钮不正确地定位类。这实际上是在寻找一个带有子按钮的元素。

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

#2

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:

…在具有类red_btn的父元素中查找一个按钮。它实际上应该是:

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.

…尽管选择器的按钮部分可能是多余的，除非您有具有相同类名的不同类型的其他元素。

#3

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:

而不是在你的CSS文件:

#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.

注意:我正在使用SASS预编译器，因此上面的$light_green变量可能看起来很奇怪。

#1