HTML点击按钮弹出颜色选择器,css如何实现按钮点击与松开颜色不同？

前端开发中经常使用到的组件就是按钮，按钮的不同状态如点击变色、鼠标悬浮变色、等状态能极大的提升用户体验度，那么如何使用css来实现按钮的这些状态呢？下面我们一起来学习下吧！

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

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

1、新建一个按钮元素提交

(推荐学习：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答疑栏目进行学习！