CSS拟物按钮

xml 复制代码
<div class="btn">F</div>
css 复制代码
.btn {
        margin: 150px 0 0 150px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100px;
        height: 100px;
        background-color: #fff;
        border-radius: 20px;
        font-size: 50px;
        color: #333;
        /* 禁止选中文本 */
        user-select: none;
        cursor: pointer;
        transition: all 0.4s ease-in-out;
        text-shadow: 2px 2px 2px #ccc;
        box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.2), -20px -20px 30px rgba(225, 225, 225, 1);
        &:hover {
            font-size: 48px;
            box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(225, 225, 225, 0.8), inset 10px 10px 20px rgba(0, 0, 0, 0.1), inset -10px -10px 20px rgba(225, 225, 225, 1);

        }
}
相关推荐
非凡ghost15 分钟前
Adobe Lightroom安卓版(手机调色软件)绿色版
前端·windows·adobe·智能手机·软件需求
BestAns1 小时前
Postman 平替?这款轻量接口测试工具,本地运行 + 批量回归超实用!
前端
专注前端30年1 小时前
Webpack进阶玩法全解析(性能优化+高级配置)
前端·webpack·性能优化
烛阴1 小时前
Lua世界的基石:变量、作用域与七大数据类型
前端·lua
张拭心1 小时前
“不卷 AI、不碰币、下班不收消息”——Android 知名技术大牛 Jake Wharton 的求职价值观
android·前端·aigc
SoaringHeart2 小时前
Flutter疑难解决:单独让某个页面的电池栏标签颜色改变
前端·flutter
Yeats_Liao2 小时前
Go Web 编程快速入门 13 - 部署与运维:Docker容器化、Kubernetes编排与CI/CD
运维·前端·后端·golang
Yeats_Liao2 小时前
Go Web 编程快速入门 14 - 性能优化与最佳实践:Go应用性能分析、内存管理、并发编程最佳实践
前端·后端·性能优化·golang
天才测试猿2 小时前
Selenium定位元素的方法css和xpath的区别
css·自动化测试·软件测试·python·selenium·测试工具·测试用例
蒜香拿铁2 小时前
Angular【http服务端交互】
前端·http·angular.js