css如何实现按钮点击与松开颜色不同？

css如何实现按钮点击与松开颜色不同？

实现按钮点击与松开颜色不同，我们可以使用css中的伪类选择器来实现！具体用到的伪类选择器是 :active ，该选择器用于选择活动链接，但同样适用于其他元素。

1、新建一个按钮元素

<button class="dv_bt_buttoncommit">提交</button>

（推荐学习：CSS视频教程）

2、使用css设计默认的按钮样式

 /**提交按钮**/
.dv_bt_buttoncommit{
    margin-top: 10px;
    width: 80%;
    height: 40px;
    color: white;
    background: #CB0165;  /* 默认的颜色 */
    border-radius: 5px;
}

3、使用:active选择器添加，当按钮被点击时的样式

.dv_bt_buttoncommit:active{
    background: #000000;   /* 黑色 */
    opacity: 0.5;    /* 设置不透明度（可以不设置） */
}

效果：

更多CSS3相关技术文章，请访问CSS3答疑栏目进行学习！

以上就是css如何实现按钮点击与松开颜色不同？的详细内容，更多请关注0133技术站其它相关文章！