具体代码如下

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. hdfs/hbase 程序利用Kerberos认证超过ticket_lifetime期限后异常

    问题描述 业务需要一个长期运行的程序,将上传的文件存放至HDFS,程序启动后,刚开始一切正常,执行一段时间(一般是一天,有的现场是三天),就会出现认证错误,用的JDK是1.8,hadoop-clien ...

  2. JS怎样做四舍五入

    1 .tofixed方法 toFixed() 方法可把 Number 四舍五入为指定小数位数的数字.例如将数据Num保留2位小数,则表示为:toFixed(Num):但是其四舍五入的规则与数学中的规则 ...

  3. Java标签学习

    今天早上看Java编程思想第四章控制执行流程,本来很简单的一些东西,但是突然看到了goto发现自己以前还真的没怎么用过,不过Java中对goto作为保留关键字,而是提供了一个叫标签的东西,我们一起来看 ...

  4. 洛谷 p3834 主席树

    题目链接:https://www.luogu.org/problem/P3834 主席树求静态区间第k小 #include<iostream> #include<cstdio> ...

  5. numpy基本知识

    """np.arrayobject 数组或嵌套的数列dtype 数组元素的数据类型,可选copy 对象是否需要复制,可选order 创建数组的样式,C为行方向,F为列方向 ...

  6. Pyhon语法字符集报错

    pyhton对语法的字符集,特别的敏感因此我们在写python代码特别要注意.以下代码是个人在学习python中遇见的错误 附:错代码截图1-1 从以上代码中可以看到,似乎代码没有什么问题接下来验证一 ...

  7. Nginx代理服务——反向代理

    ​ Nginx可以代理的服务 ​ 正向代理,例如翻墙 ​ 反向代理 ​ 正向和反向代理的区别 区别在于代理的对象不一样 正向代理:代理的对象是客户端 反向代理:代理的对象是服务器 配置语法 Synta ...

  8. Kubernetes concepts 系列

    kubernetes concepts overview Pod overview Replication Controller Pod Liftcycle Termination Of Pod Re ...

  9. 关于<Java 中 RMI、JNDI、LDAP、JRMP、JMX、JMS那些事儿(上)>看后的一些总结-1

    原文地址:https://www.anquanke.com/post/id/194384#h3-3 1.java rmi 关于rmi客户端和服务端通信的过程,java的方法都实现在rmi服务端,客户端 ...

  10. [洛谷P4178] Tree (点分治模板)

    题目略了吧,就是一棵树上有多少个点对之间的距离 \(\leq k\) \(n \leq 40000\) 算法 首先有一个 \(O(n^2)\) 的做法,枚举每一个点为起点,\(dfs\) 一遍可知其它 ...