按钮凸起与按下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);
相关推荐
白熊1885 分钟前
【通用智能体】Lynx :一款基于终端的纯文本网页浏览器
前端·人工智能·chrome·通用智能体
二川bro6 分钟前
Cursor 模型深度分析:区别、优缺点及适用场景
前端
NoneCoder21 分钟前
正则表达式与文本处理的艺术
前端·javascript·面试·正则表达式
广药门徒44 分钟前
OpenMV IDE 的图像接收缓冲区原理
前端·人工智能·python
霸王蟹1 小时前
常见面试题:Webpack的构建流程简单说一下。
前端·笔记·学习·webpack·node.js·vue
黄暄1 小时前
Linux项目部署全攻略:从环境搭建到前后端部署实战
java·linux·运维·服务器·前端·后端·持续部署
island13141 小时前
JAVA Web 期末速成
java·开发语言·前端
小峰编程2 小时前
Python函数——万字详解
linux·运维·服务器·开发语言·前端·网络·python
11054654013 小时前
23、电网数据管理与智能分析 - 负载预测模拟 - /能源管理组件/grid-data-smart-analysis
前端·能源
开发者小天3 小时前
React中startTransition的使用
前端·react.js·c#