具体代码如下

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. C++指针声明

    指针声明 void f(int) void (*p1)(int)=&f; void (*p2)(int)=f; 调用例子: int f(); int (*p) ()=f; //指针p指向f i ...

  2. 到底如何配置 maven 编译插件的 JDK 版本

    千言万语不及官方文档,详情请阅读 compiler:compile 文档 配置 maven 编译插件的 JDK 版本 maven 编译插件(maven-compiler-plugin)有默认编译 JD ...

  3. RabbitMQ远程调用测试用例

    RabbitMQ远程调用测试,使用外部机器192.168.174.132上的RabbitMQ,使用之前需要对远程调用进行配置,操作过程见博文“解决RabbitMQ远程不能访问的问题”. SendTes ...

  4. 正则表达式grep命令

    grep命令 作用:文本搜索工具,根据用户指定的“模式”对目标文本逐行进行匹配检查:打印匹配到的行. 模式::由正则表达式字符及文本字符所编写的过滤条件 语法:grep [OPTIONS] PATTE ...

  5. CF449B Jzzhu and Cities 迪杰斯特拉最短路算法

    CF449B Jzzhu and Cities 其实这一道题并不是很难,只是一个最短路而已,请继续看我的题解吧~(^▽^) AC代码: #include<bits/stdc++.h> #d ...

  6. 求一个数的阶乘在 m 进制下末尾 0 的个数

    题意 : 求一个数 n 的阶层在 m 进制下末尾 0 的个数 思路分析 : 如果是 10 进制地话我们是很容易知道怎么做的,数一下其对 5 约数地个数即可,但是换成 m 进制的话就需要先将 m 分解质 ...

  7. net 自带cache

    using System.Web.Caching; Cache cache = new Cache();

  8. 线程上下文类加载器ContextClassLoader内存泄漏隐患

    前提 今天(2020-01-18)在编写Netty相关代码的时候,从Netty源码中的ThreadDeathWatcher和GlobalEventExecutor追溯到两个和线程上下文类加载器Cont ...

  9. Djaingo 日志配置

    1.setting.py文件 # 项目级别的日志配置 BASE_LOG_DIR = os.path.join(BASE_DIR, "log") LOGGING = { 'versi ...

  10. MySql主要性能指标说明

    在项目当中数据库一般都会成为主要的性能与负载瓶颈,那么针对数据库各项性能指标的监控与对应的优化是开发与运维人员需要面对的主要工作,而且这部分的工作会贯穿项目从开发到运行的整个周期里. 这篇文章中我们对 ...