css技巧系列之(九) 新拟按钮效果

实现效果

实现思路：

使用 box-shadow 属性模拟新拟态风格按钮，当鼠标 :hover 悬浮时，通过 transition 过渡效果实现阴影变化丝滑过渡 给 button 设置 box-shadow 属性，设置外阴影和内阴影，然后 button 按钮增加 transition 属性，当鼠标悬浮在上方时，改变按钮的外阴影和内阴影参数，实现阴影的变化过渡。

实现源码：

  .btn {
        margin: 30% 30%;
        height: 70px;
        padding: 0 20px;
        cursor: pointer;
        border: 1px solid rgba(255, 255, 255, 0.8);
        border-radius: 10px;
        background-color: #f2fff7;
        font-size: 32px;
        font-weight: 700;
        color: #44d431;
        box-shadow: 6px 6px 16px rgba(0, 0, 0, 0.2),
          -6px -6px 16px rgba(255, 255, 255, 0.8),
          inset 0px 0px 0px rgba(0, 0, 0, 0.2),
          inset 0px 0px 0px rgba(255, 255, 255, 0.8);
        transition: 0.2s;
      }
      .btn:hover {
        color: #3034d4;
        background-color: #f2f3ff;
        border: 1px solid rgba(255, 255, 255, 1);
        box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2),
          0px 0px 0px rgba(255, 255, 255, 0.8),
          inset 6px 6px 12px rgba(0, 0, 0, 0.2),
          inset -6px -6px 12px rgba(255, 255, 255, 0.8);
        transform: translateY(10px) scale(0.98);
      }

   <button class="btn">FUN</button>

css技巧效果到此结束，如果喜欢加个关注，可以在样式中寻找开发中的UI，可直接复制看效果。公众号地址