CSS实现按钮点击后根据背景色加深效果-一颗优雅草bigniu
具体代码如下
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的更多相关文章
- DIV+CSS布局重新学习之使用A标签和CSS制作按钮
这里主要利用A元素的伪类来实现: a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hove ...
- Hover.css:一组超实用的 CSS3 悬停效果和动画
Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after ...
- 漂亮的自适应宽度的多色彩CSS图片按钮
一.素材 二.效果 三.CSS *{padding:0;margin:0} /*----------------------------------- 自适应宽度图片按钮 ...
- GUI编程笔记(java)08:GUI通过鼠标移动到按钮上更改背景色案例
首先我们看看源代码如下: package cn.itcast_06; import java.awt.Button; import java.awt.Color; import java.awt.Fl ...
- css中按钮的四种状态
css中按钮有四种状态 1. 普通状态2. hover 鼠标悬停状态3. active 点击状态4. focus 取得焦点状态 .btn:focus{outline:0;} 可以去除按钮或a标签点击后 ...
- 用HTML和CSS实现WWDC 2015上的动画效果
用HTML和CSS实现WWDC 2015上的动画效果 动画效果WWDC 2015 原文:https://cssanimation.rocks/wwdc15/ 译者:周晓楷(@Helkyle) 每年 ...
- css 导航,菜单对应页面切换效果实现方法
实现原理: 每个菜单有多个li标签,每个li标签含一个id,li标签的id用来标记:点击效果 每个页面有一个id,这个id的作用是对应每个li标签的点击链接对应的页面,它的作用是用来标记:li标签的h ...
- css 使用background背景实现border边框效果
css中,我们一般使用border给html元素设置边框,但也可以使用background背景来模拟css边框效果,本文章向大家介绍css 使用background背景实现border边框效果,需要的 ...
- 纯CSS实现的右侧底部简洁悬浮效果
我们见过很多页面右侧浮动效果,最早有QQ联系面板,对联广告等,大多数都是基于Javascript实现的动态效果,今天我给大家分享一个只需要CSS结合DIV实现的右侧浮动效果. HTML 我们希望悬浮效 ...
随机推荐
- MD5:js,java,C#三种语言加密结果不同解决办法
最近遇到前端js MD5加密与后端C#与Java MD5加密结果不一致的问题,所以写个关于此问题的解决办法 前端js引用的md5类库,类库地址:https://blueimp.github.io/Ja ...
- Redis 高可用之"持久化"
Redis高可用概述 在Redis中,实现高可用的技术主要包括:持久化.复制(读写分离).哨兵.集群. 持久化: 持久化是最简单的高可用方法(有时甚至不被归为高可用手段),主要作用是数据备份,即将数据 ...
- 最强常用开发库总结 - JSON库详解
最强常用开发库总结 - JSON库详解 JSON应用非常广泛,对于Java常用的JSON库要完全掌握.@pdai JSON简介 JSON是什么 JSON 指的是 JavaScript 对象表示法(Ja ...
- ODBC连接时报错不可识别的数据库格式
报这个错误是因为Acess的版本不同. 2003版本的Acess的数据连接字符串: string dataBasePath = @"C:/Users/user/Documents/Test. ...
- 2次方的期望dp
某一天WJMZBMR在打osu~~~但是他太弱逼了,有些地方完全靠运气:( 我们来简化一下这个游戏的规则 有n次点击要做,成功了就是o,失败了就是x,分数是按comb计算的,连续a个com ...
- SpringCloud之Eureka(服务注册和服务发现基础篇)(二)
一:Eureka简介 Eureka是Spring Cloud Netflix的一个子模块,也是核心模块之一.用于云端服务发现,一个基于REST的服务,用于定位服务,以实现云端中间层服务发现和故障转移. ...
- Qt Installer Framework翻译(1)
IFW概览 Qt Installer Framework 提供了一组工具和程序来创建安装程序,并在不重写源代码的情况下将它们部署到所有受支持的桌面 Qt 平台上.安装程序具有本地化外观,并且可以感知运 ...
- 我的第一个 Kaggle 比赛学习 - Titanic
背景 Titanic: Machine Learning from Disaster - Kaggle 2 年前就被推荐照着这个比赛做一下,结果我打开这个页面便蒙了,完全不知道该如何下手. 两年后,再 ...
- python接口自动化测试 - unittest框架suite、runner详细使用
test suite 测试套件,理解成测试用例集 一系列的测试用例,或测试套件,理解成测试用例的集合和测试套件的集合 当运行测试套件时,则运行里面添加的所有测试用例 test runner 测试运行器 ...
- UidGenerator springboot2集成篇
uid-generator 官网集成文档: https://github.com/baidu/uid-generator/blob/master/README.zh_cn.md 由于并没有提供spri ...