https://github.com/mayandev/neumorphism-button

⚪️这是一个拟态设计的按钮
https://github.com/mayandev/neumorphism-button

Last synced: about 1 year ago
JSON representation

⚪️这是一个拟态设计的按钮

• Host: GitHub
• URL: https://github.com/mayandev/neumorphism-button
• Owner: Mayandev
• Created: 2020-04-28T04:01:57.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2020-04-28T04:03:54.000Z (about 6 years ago)
• Last Synced: 2025-04-25T23:30:51.706Z (about 1 year ago)
• Language: CSS
• Size: 1000 Bytes
• Stars: 6
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 拟态设计按钮

这是一个拟态设计按钮，在线预览：[https://mayandev.top/neumorphism-button/](https://mayandev.top/neumorphism-button/)

[拟态设计主要特点](https://www.zcool.com.cn/article/ZMTEwMjQ3Ng==.html)就是在可点区域做了一些「浮雕」的效果，在视觉处理上是未选中状态是凸出来的，已经选中状态是凹进去的。在投影方面，左上角亮色投影，右下角深色投影（有且只有一个光源照射）。

按钮的实现主要利用 box-shadow 属性，对四个方向的阴影进行控制，详情可查看 [css](./style.css) 文件。

效果图如下：

![](https://mayandev.oss-cn-hangzhou.aliyuncs.com/blog/neumorphism-2.gif)