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 =＆＃34; green_btn＆＃34;到html什么也没做。

有人有什么想法吗？

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

Answer 2

您的课程正在寻找里面的按钮带有颜色类的元素。例如：

.red_btn button

...正在查找具有类red_btn的父元素内的按钮。它实际上应该是：

button.red_btn

...虽然选择器的button部分可能是多余的，除非你有其他具有相同类名的不同类型的元素。

Answer 3

对于那些最终在这里的人，像我一样，不知道如何更改按钮的背景颜色......

而不是在CSS文件中：

#footer_join_button {
  background-color: $light_green; 
}

......甚至：

#footer_join_button {
  color: $light_green; 
}

...目标的正确属性/属性只是background：

#footer_join_button {
  background: $light_green; 
}

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

用css更改HTML按钮标签背景颜色？

3 个答案: