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

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

Delphi中点击网页弹出的Alert对话框的确定按钮
实现的方法有很多,一般都是使用Windows API函数遍历窗口,查找指定标题的窗口,然后从该窗口查找确定按钮,向该按钮发送鼠标消息进行模拟点击.由于IE8由Alert弹出的网页对话框的标题是&quo ...
vue 使用高德地图给海量点标记，并点击标记弹出信息窗口，信息窗口绑定点击事件
目录一.需求二.引入高德地图 2.1.将高德地图引入到项目中 2.2.查看官网快速上手,熟悉高德地图的主要API 2.3.海量点标注要用到的API文档 2.4.全部代码其他: 一.需求因为不知 ...
android悬浮按钮弹出与隐藏,Android悬浮窗按钮实现点击并显示/隐藏多功能列表
前言最近在一个项目中,需要制作录屏的功能,原先是在应用中有录屏/控制的按钮,思考之下觉得这种效果并不好,因此就想制作一个可以悬浮的悬浮窗,这样不论手机在什么界面中都可以对录屏功能进行控制. 这里就来 ...
android点击弹出日期选择器,关于Android 点击按钮弹出日期选择器
首先是 xml文件 xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width= ...
点击按钮弹出iframe_WEB安全(四) ：CSRF与点击劫持
跨站点请求伪造 CSRF是跨站点请求伪造,它的请求有两个关键点,跨站点的请求与请求是伪造的, 从字面上看,跨站点的请求来源应该是其他站点,比如,目标网站接收到来源网站的恶意操作,但是,只要是恶意操作, ...
html页面点击小图弹出大图代码,利用JS实现点击小图弹出大图代码
特效描述:利用JS实现点击小图弹出大图代码.利用JS实现点击小图弹出大图代码代码结构 1. HTML代码 (function(){ var LightBox = function(options ...
微信小程序点击按钮弹出弹窗_微信小程序实现的点击按钮弹出底部上拉菜单功能示例...
本文实例讲述了微信小程序实现的点击按钮弹出底部上拉菜单功能.分享给大家供大家参考,具体如下: index.wxml 弹出action sheet {{item.txt}} 取消提示:您选择了菜单{ ...
Android --- 进入页面时，不弹出软键盘。当 EditText 被点击时不弹出软键盘，而是调用其他选择器，比如时间选择器等
功能需求: 1.进入页面时,不弹出软键盘 2.当 EditText 被点击时不弹出软键盘,而是调用其他选择器,比如时间选择器等搜索百度测试: 1.百度上说用 editText.setInputTyp ...
vue之表格数据渲染，实现点击表格某列按钮弹出框显示剩余数据(模态框知识点）
点击按钮弹出模态框实现详情:https://blog.csdn.net/qq_20565303/article/details/78734592 结果: 代码: <template>< ...
HTML点击按钮弹出对话框（仅代码）
HTML点击按钮弹出对话框的代码(整个网页): <!doctype html> <html> <head><title>无标题文档</title& ...

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

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

最新文章

热门文章