炫酷星星按钮效果(附源码)

这是一个 炫酷带有星星✨的按钮效果，主要通过 CSS 和 SVG 创建一个具有视觉吸引力的按钮，结合了动画、渐变和交互效果。

复制源代码到空白的html格式文件，在浏览中打开运行即可。

<a class="dazzle fluid" href="#">
      <svg
        aria-hidden="true"
        viewBox="0 0 96 96"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M93.781 51.578C95 50.969 96 49.359 96 48c0-1.375-1-2.969-2.219-3.578 0 0-22.868-1.514-31.781-10.422-8.915-8.91-10.438-31.781-10.438-31.781C50.969 1 49.375 0 48 0s-2.969 1-3.594 2.219c0 0-1.5 22.87-10.406 31.781-8.908 8.913-31.781 10.422-31.781 10.422C1 45.031 0 46.625 0 48c0 1.359 1 2.969 2.219 3.578 0 0 22.873 1.51 31.781 10.422 8.906 8.911 10.406 31.781 10.406 31.781C45.031 95 46.625 96 48 96s2.969-1 3.562-2.219c0 0 1.523-22.871 10.438-31.781 8.913-8.908 31.781-10.422 31.781-10.422Z"
          fill="#000"
        />
      </svg>
      <svg
        aria-hidden="true"
        viewBox="0 0 96 96"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M93.781 51.578C95 50.969 96 49.359 96 48c0-1.375-1-2.969-2.219-3.578 0 0-22.868-1.514-31.781-10.422-8.915-8.91-10.438-31.781-10.438-31.781C50.969 1 49.375 0 48 0s-2.969 1-3.594 2.219c0 0-1.5 22.87-10.406 31.781-8.908 8.913-31.781 10.422-31.781 10.422C1 45.031 0 46.625 0 48c0 1.359 1 2.969 2.219 3.578 0 0 22.873 1.51 31.781 10.422 8.906 8.911 10.406 31.781 10.406 31.781C45.031 95 46.625 96 48 96s2.969-1 3.562-2.219c0 0 1.523-22.871 10.438-31.781 8.913-8.908 31.781-10.422 31.781-10.422Z"
          fill="#000"
        />
      </svg>
      <svg
        aria-hidden="true"
        viewBox="0 0 96 96"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M93.781 51.578C95 50.969 96 49.359 96 48c0-1.375-1-2.969-2.219-3.578 0 0-22.868-1.514-31.781-10.422-8.915-8.91-10.438-31.781-10.438-31.781C50.969 1 49.375 0 48 0s-2.969 1-3.594 2.219c0 0-1.5 22.87-10.406 31.781-8.908 8.913-31.781 10.422-31.781 10.422C1 45.031 0 46.625 0 48c0 1.359 1 2.969 2.219 3.578 0 0 22.873 1.51 31.781 10.422 8.906 8.911 10.406 31.781 10.406 31.781C45.031 95 46.625 96 48 96s2.969-1 3.562-2.219c0 0 1.523-22.871 10.438-31.781 8.913-8.908 31.781-10.422 31.781-10.422Z"
          fill="#000"
        />
      </svg>
      <svg
        aria-hidden="true"
        viewBox="0 0 96 96"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M93.781 51.578C95 50.969 96 49.359 96 48c0-1.375-1-2.969-2.219-3.578 0 0-22.868-1.514-31.781-10.422-8.915-8.91-10.438-31.781-10.438-31.781C50.969 1 49.375 0 48 0s-2.969 1-3.594 2.219c0 0-1.5 22.87-10.406 31.781-8.908 8.913-31.781 10.422-31.781 10.422C1 45.031 0 46.625 0 48c0 1.359 1 2.969 2.219 3.578 0 0 22.873 1.51 31.781 10.422 8.906 8.911 10.406 31.781 10.406 31.781C45.031 95 46.625 96 48 96s2.969-1 3.562-2.219c0 0 1.523-22.871 10.438-31.781 8.913-8.908 31.781-10.422 31.781-10.422Z"
          fill="#000"
        />
      </svg>
      <svg
        aria-hidden="true"
        viewBox="0 0 96 96"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M93.781 51.578C95 50.969 96 49.359 96 48c0-1.375-1-2.969-2.219-3.578 0 0-22.868-1.514-31.781-10.422-8.915-8.91-10.438-31.781-10.438-31.781C50.969 1 49.375 0 48 0s-2.969 1-3.594 2.219c0 0-1.5 22.87-10.406 31.781-8.908 8.913-31.781 10.422-31.781 10.422C1 45.031 0 46.625 0 48c0 1.359 1 2.969 2.219 3.578 0 0 22.873 1.51 31.781 10.422 8.906 8.911 10.406 31.781 10.406 31.781C45.031 95 46.625 96 48 96s2.969-1 3.562-2.219c0 0 1.523-22.871 10.438-31.781 8.913-8.908 31.781-10.422 31.781-10.422Z"
          fill="#000"
        />
      </svg>
      <!-- End sparkles -->
      <span class="fluid">按 钮!</span>
      <span class="fluid" aria-hidden="true">按 钮!</span>
    </a>

​

以下是对其效果、实现原理和可能应用场景的详细说明：

效果

• 炫彩按钮：按钮在用户悬停或点击时会产生动态的视觉效果，包括文本阴影、背景渐变和动画。
• 交互反馈：按钮的状态变化（如悬停、点击）通过 CSS 动画和过渡效果进行视觉反馈，增强用户体验。
• SVG图标：按钮中包含 SVG 图标，提供清晰的视觉指示，增强可用性。

实现原理

1. HTML结构：使用 <button> 元素和 <output> 元素构建按钮的界面。按钮中包含 SVG 图形，表示增加和减少的图标。
2. CSS样式：
   • 使用 CSS 变量定义动画的持续时间、缓动函数和颜色，便于管理和修改。
   • 使用 @keyframes 创建滑入和滑出动画，增强视觉效果。
   • 使用 mix-blend-mode 和 backdrop-filter 来实现视觉效果的叠加和模糊。

应用场景

• 用户界面：可以用作网页或应用程序中的按钮，适用于各种操作，如提交表单、切换状态等。
• 游戏：在游戏中用作操作按钮，提供用户与游戏的交互。
• 数据展示：在数据仪表板中使用，展示实时数据的变化，例如用户活动、销售数据等。