具体代码如下

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. 越来越清晰的TFRecord处理图片的步骤

    # 首先是模块的导入 """ os模块是处理文件夹用的 PIL模块是用来处理图片的 """ import tensorflow as tf ...

  2. Scala实践1

    一.Scala安装和配置 1.1安装 Scala需要Java运行时库,安装Scala需要首先安装jdk. 然后在Scala官网下载 程序安装包 根据不同的操作系统选择不同的安装包,下载完成后,将安装包 ...

  3. 数学基础系列(六)----特征值分解和奇异值分解(SVD)

    一.介绍 特征值和奇异值在大部分人的印象中,往往是停留在纯粹的数学计算中.而且线性代数或者矩阵论里面,也很少讲任何跟特征值与奇异值有关的应用背景. 奇异值分解是一个有着很明显的物理意义的一种方法,它可 ...

  4. python3搭建Django项目

    1.本次安装的python3.7版本,可前往官网下载,这里的安装不作多余介绍 2.安装虚拟环境 第一种:virtualenv:用于创建虚拟环境,实现项目之间的环境隔离,解决项目中存在的版本冲突问题 w ...

  5. Flask路由+视图补充

    一.路由设置的两种方法 1.装饰器 @app.route('/index/') def index(): return 'Hello World!' 2.源码 route->decorator- ...

  6. maven-assembly-plugin入门

    愿文地址:https://www.jianshu.com/p/e8585a991e8e 当你使用 Maven 对项目打包时,你需要了解以下 3 个打包 plugin,它们分别是 plugin func ...

  7. ubuntu文件操作mkdir cp mv rm ln

    pwd:显示当前目录 date:显示当前日期 cal:显示日历 ls:列出目录内容 cd:改变当前工作目录 ‘.’:代表工作目录 ‘..’:代表工作目录父目录 进入当前目录的父目录:cd /home ...

  8. 什么是“跑面”呢? - ERSS耳斯百科:您的随身移动百科

    跑面 [pǎo miàn] 跑面,是一个汉语词汇,拼音为pǎo miàn,英文名为Run-Noodles,最基本解释为人跑步去吃面,其意义还有多重深层解释. 中文名:跑面 英文名:Run-Noodle ...

  9. xlwings excel(三)

    App相当于Excel程序,Book相当于工作簿.N个Excel程序则由apps表示,N个工作簿由books表示. 对工作簿的操作 #导入xlwings模块 import xlwings as xw ...

  10. 个人第四次作业Alpha2版本测试~顾毓

    个人第四次作业Alpha2版本测试 这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/GeographicInformationScience/ 这个作业要 ...