具体代码如下

button{
position: relative;
}
button:active::before {
display: block;
content: '';
position: absolute;
top: 0px;
left: 0px;
width: %;
height: %;
background: rgba(, , , %)
}

如果是自定义DIV也是可以用同样方法的,可以改为


.btn{

position: relative;

}

/**这里的active为选中的状态,可以根据情况修改**/

.btn:active::before {
display: block;
content: '';
position: absolute;
top: 0px;
left: 0px;
width: %;
height: %;
background: rgba(, , , %)
}

CSS实现按钮点击后根据背景色加深效果-一颗优雅草bigniu 2020年2月19日记录

CSS实现按钮点击后根据背景色加深效果-一颗优雅草bigniu的更多相关文章

  1. DIV+CSS布局重新学习之使用A标签和CSS制作按钮

    这里主要利用A元素的伪类来实现: a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hove ...

  2. Hover.css:一组超实用的 CSS3 悬停效果和动画

    Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after ...

  3. 漂亮的自适应宽度的多色彩CSS图片按钮

    一.素材               二.效果 三.CSS *{padding:0;margin:0} /*----------------------------------- 自适应宽度图片按钮 ...

  4. GUI编程笔记(java)08:GUI通过鼠标移动到按钮上更改背景色案例

    首先我们看看源代码如下: package cn.itcast_06; import java.awt.Button; import java.awt.Color; import java.awt.Fl ...

  5. css中按钮的四种状态

    css中按钮有四种状态 1. 普通状态2. hover 鼠标悬停状态3. active 点击状态4. focus 取得焦点状态 .btn:focus{outline:0;} 可以去除按钮或a标签点击后 ...

  6. 用HTML和CSS实现WWDC 2015上的动画效果

    用HTML和CSS实现WWDC 2015上的动画效果 动画效果WWDC 2015   原文:https://cssanimation.rocks/wwdc15/ 译者:周晓楷(@Helkyle) 每年 ...

  7. css 导航,菜单对应页面切换效果实现方法

    实现原理: 每个菜单有多个li标签,每个li标签含一个id,li标签的id用来标记:点击效果 每个页面有一个id,这个id的作用是对应每个li标签的点击链接对应的页面,它的作用是用来标记:li标签的h ...

  8. css 使用background背景实现border边框效果

    css中,我们一般使用border给html元素设置边框,但也可以使用background背景来模拟css边框效果,本文章向大家介绍css 使用background背景实现border边框效果,需要的 ...

  9. 纯CSS实现的右侧底部简洁悬浮效果

    我们见过很多页面右侧浮动效果,最早有QQ联系面板,对联广告等,大多数都是基于Javascript实现的动态效果,今天我给大家分享一个只需要CSS结合DIV实现的右侧浮动效果. HTML 我们希望悬浮效 ...

随机推荐

  1. react 表单(受控组件和非受控组件)

    我们知道表单元素与其他的普通DOM元素来说是不一样的,它们保存了自己的一些状态. 我们主要说的就是表单元素中的受控组件和非受控组件. 受控组件就是这个组件的状态是我们(react)控制的,这个组件的行 ...

  2. 下载并部署 ArcGIS API for JavaScript 4.10

    学习ArcGIS API for JavaScript 4.10 的第一步就是下载并部署该文件. 有的读者由于之间没接触过,不知道怎么下载和部署文件.这些读者要求作者详细的写一篇关于下载和部署的文章( ...

  3. pair 数组

    当有两个元素需要绑定在一起的时候可以用结构体 , 此时也可以用 pair 数组去替代结构体 . 定义 : pair<int, double> p1; //使用默认构造函数 pair< ...

  4. 用HttpURLConnection来完成HTTP发送报文接收报文!

    public String sendMsg(String url, byte[] PostData) { String content = null; URL urls = null; try { u ...

  5. elasticjob学习一:simplejob初识和springboot整合

    Elastic-Job是一个分布式调度解决方案,由两个相互独立的子项目Elastic-Job-Lite和Elastic-Job-Cloud组成. Elastic-Job-Lite定位为轻量级无中心化解 ...

  6. .net Core Autofac稍微高级一点的方法

    前情摘要 前段时间写了autofac的注入但是每次都需要去修改startup这应该不是大家想要的. 至少不是我想要的. 网上有朋友说可以创建一个基础类来时间. 好了吹牛时间结束我们开始干点正事. 创建 ...

  7. 01Java语言基础

    [实验任务四]: 1.程序设计思想 根据RandomStr.java,随机生成6位字母,在对话框中输出,用户根据随机生成的验证码对应输入,程序根据用户输入的内容与系统随机生成的验证码字符比较,若相等, ...

  8. 异想家Golang学习笔记

    1. 简介 官网:https://golang.google.cn/ 2. 编译器.工具链 编译 go build .\demo.go 编译和执行指令合二为一 go run demo.go 3. 注释 ...

  9. openpyxl库实现对excel文档进行编辑(追加写入)

    首先,这个库只支持xlsx格式的excel文件 预期,对”excel_test.xlsx“的A1单元格写入”hello word“ 1.安装”openpyxl“库,pip install openpy ...

  10. robotframework,移动端(小程序)自动化,滚动屏幕的方法

    场景描述: 小程序端定位元素有无法定位弹出层内容的问题(自动化工具只能识别到背景主层,无法识别到弹出层) 解决思路: 1.弹出层元素与背景主层元素位置一致,当点击出弹出层时,在定位背景主层即可定位到弹 ...