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

我为我的提交按钮以及指向其他页面和功能的按钮使用了HTML按钮标记我希望能够拥有不同背景的按钮（一个蓝色，一个灰色，一个红色，一个绿色等）），但似乎无法通过简单地将类添加到按钮标记中来实现它。用css更改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作为背景，为html添加class =“green_btn”什么也不做。

任何人有任何想法？

来源

2014-03-29 Meta

注意：我已经尝试将.green_btn放在css中的按钮后，没有任何作用。 – Meta

你的目标是你的班级与.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; 
}

来源

2014-03-29 22:16:59 Seth

谢谢，我试图从CSS中的类中完全删除“按钮”，这也起作用。我将使用你的方法，看看它是否也能工作（把它定义为一个按钮）。再次感谢！ – Meta

http://puu.sh/7OAd9.png很好，再次感谢！ – Meta

不客气，随时欢迎。 – Seth

你的班正在寻找一个按钮内用颜色类的元素。例如：

.red_btn button

...正在寻找类red_btn的父元素内的按钮。它其实应该是：

button.red_btn

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

来源

2014-03-29 22:17:24 Utkanos

我原本是这样做的，但是我的错误是在按钮和.red_btn之间有空格，打破了整个事情，哈哈。谢谢（你的）信息！ – Meta

对于任何人在这里结束了谁和我一样，不知道如何更改按钮的背景颜色...

取而代之的是在你的CSS文件：

#footer_join_button { 
    background-color: $light_green; 
}

.. 。甚至：

#footer_join_button { 
    color: $light_green; 
}

...正确的属性/属性定位是根本background：

#footer_join_button { 
    background: $light_green; 
}

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

来源

2014-06-25 17:54:48 mecampbellsoup

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

回答

相关问题