使用CSS更改HTML按钮标签的背景颜色？

Question

我将使用HTML按钮标签来作为我的提交按钮以及指向其他页面和功能的按钮。我希望能够有不同背景颜色的按钮（如蓝色、灰色、红色、绿色等），但是似乎无法通过简单地添加类到按钮标签中实现。

以下是我目前的代码： 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;
}

默认情况下，我希望按钮的背景是garkgrey_btn_bg.png，但如果我想将green_btn_bg.png用作背景，则将class =“green_btn”添加到html中不起作用。

有人有任何想法吗？

- Meta

---

注意：我已经尝试在CSS中将“.green_btn”放在按钮后面，但没有效果。 - Meta

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

- Seth

---

谢谢，我尝试从CSS类中完全删除“button”，这也起作用了。我会使用您的方法，看看是否也有效（将其定义为按钮）。再次感谢！ - Meta

Answer 2

如果有任何和我一样不确定如何更改按钮背景颜色的人来到这里……在您的CSS文件中，不要使用以下内容：

#footer_join_button {
  background-color: $light_green; 
}

"

...或者甚至：

"

#footer_join_button {
  color: $light_green; 
}

正确的属性/属性名称是background：

#footer_join_button {
  background: $light_green; 
}

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

- mecampbellsoup

Answer 3

你的类正在查找一个按钮，这个按钮在一个带有颜色类的元素中。例如：

.red_btn button

...正在查找父元素中带有类名red_btn的按钮。实际上应该是：

button.red_btn

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

- Mitya

---

我最初是这样做的，但我的错误在于button和.red_btn之间有一个空格，导致整个东西都崩溃了，哈哈。谢谢你的信息！ - Meta