按钮凸起与按下css效果

效果展示

css实现代码

凸起效果:

css 复制代码
box-shadow: 7px 7px 12px rgba(0, 0, 0.4), -7px -7px 12px rgba(255, 255, 255, 0.9);

凹陷效果:

css 复制代码
box-shadow: 0 0 0 rgba(0, 0, 0, 0.4),
			0 0 0 rgba(255, 255, 255, 0.9),
			inset -7px -7px 12px rgba(255, 255, 255, 0.9),
			inset 7px 7px 12px rgba(0, 0, 0, 0.4);
相关推荐
AI大法师2 分钟前
从技术角度看React和Vue:性能、生态与开发体验对比
前端
VisuperviReborn3 分钟前
打造自己的前端监控---前端流量监控
前端·设计模式·架构
前端Hardy10 分钟前
Python是怎么将Vue项目打包成桌面端应用程序的?看这篇就够了
前端·javascript·python
Spider_Man22 分钟前
物料区的“超市大冒险”:组件、遥控器与快乐星球的奇遇记 🛒🦄
前端·低代码·typescript
uppp»23 分钟前
echarts在前后端分离项目中的实践与应用
前端·javascript·echarts
之梦25 分钟前
Electron + Vue3开源跨平台壁纸工具实战(九)子进程服务(2)
前端·electron
三小河25 分钟前
css 中 inset属性 以及简单实现spinner
前端
小趴菜_26 分钟前
手把手教你用 Vue3 + LogicFlow 打造流程编排系统
前端·vue.js
MapleWan3206326 分钟前
关于统一地图组件的一些实践与思考
前端·开源
袁煦丞28 分钟前
Bitwarden+cpolar让隐私真正属于自己:cpolar内网穿透实验室第516个成功挑战
前端·程序员·远程工作