新拟态按钮

新拟态（Neumorphism）设计是一种赋予元素从背景中凸起，或者沉入背景中的视觉效果的风格。在这个代码片段中，仅使用HTML和CSS，创建了一个在悬停状态或激活（点击）状态下表现出逼真凹凸感的按钮。

实现代码

请复制以下代码并集成到您的项目中。

<!-- HTML -->
<div class="neumorphism-wrapper">
  <button class="neumorphism-btn">Neumorphism</button>
</div>

/* CSS */
.neumorphism-wrapper {
  background-color: #e0e5ec;
  padding: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.neumorphism-btn {
  background-color: #e0e5ec;
  color: #4a5568;
  border: none;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  /* 正常状态: 外侧添加阴影使其浮起 */
  box-shadow: 9px 9px 16px rgba(163, 177, 198, 0.6), 
             -9px -9px 16px rgba(255, 255, 255, 0.5);
}

.neumorphism-btn:hover {
  /* 悬停状态: 阴影稍微变小以表现被按压的前兆 */
  box-shadow: 5px 5px 10px rgba(163, 177, 198, 0.6), 
             -5px -5px 10px rgba(255, 255, 255, 0.5);
  color: #2d3748;
}

.neumorphism-btn:active {
  /* 激活（点击）状态: 内侧添加阴影以表现凹陷 */
  box-shadow: inset 6px 6px 10px 0 rgba(163, 177, 198, 0.6), 
              inset -6px -6px 10px 0 rgba(255, 255, 255, 0.5);
}

解说

背景色统一: 作为新拟态的基础，要使元素的背景色和容器的背景色（#e0e5ec）一致。
2个阴影（box-shadow）: 左上角设置偏白的明亮阴影（光源），右下角设置暗色阴影，从而表现出立体感。
激活状态: 通过为 box-shadow 指定 inset，产生按钮被按下的凹陷效果。