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

前端开发中经常使用到的组件就是按钮,按钮的不同状态如点击变色、鼠标悬浮变色、等状态能极大的提升用户体验度,那么如何使用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;    /* 设置不透明度(可以不设置) */
}

效果:

1945114-94e1307caacacf76.gif

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

以上就是css如何实现按钮点击与松开颜色不同?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏