.btn-group {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
      max-width: 1000px;
    }

    /* 所有按钮基础样式 */
    .cool-btn {
      border: none;
      padding: 10px 20px;
      font-size: 12px;
      font-weight: 600;
      border-radius: 80px;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      text-decoration: none;
      color: #fff;
      min-width: 100px;
      text-align: center;
    }

    /* 1. 霓虹渐变按钮（赛博朋克风） */
    .btn-neon {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      box-shadow: 0 0 15px rgba(102, 126, 234, 0.6);
    }

    .btn-neon:hover {
      transform: scale(1.05);
      box-shadow: 0 0 25px rgba(102, 126, 234, 0.8);
    }

    .btn-neon::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: width 0.6s ease, height 0.6s ease;
    }

    .btn-neon:active::after {
      width: 300px;
      height: 300px;
      opacity: 0;
    }

    /* 2. 3D立体按压按钮（复古科技风） */
    .btn-3d {
      background: #2563eb;
      box-shadow: 0 8px 0 #1d4ed8, 0 10px 15px rgba(0, 0, 0, 0.3);
      transform: translateY(0);
    }

    .btn-3d:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 0 #1d4ed8, 0 12px 15px rgba(0, 0, 0, 0.4);
    }

    .btn-3d:active {
      transform: translateY(4px);
      box-shadow: 0 4px 0 #1d4ed8, 0 6px 10px rgba(0, 0, 0, 0.3);
    }

    /* 3. 液态玻璃按钮（毛玻璃+流动动效） */
    .btn-liquid {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .btn-liquid::before {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
      );
      transition: left 0.8s ease;
    }

    .btn-liquid:hover::before {
      left: 100%;
    }

    /* 4. 金属拉丝按钮（工业风+反光动效） */
    .btn-metal {
      background: linear-gradient(
        to right,
        #444 0%,
        #666 50%,
        #444 100%
      );
      color: #fff;
      text-shadow: 0 1px 0 #000;
      box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 2px 3px rgba(0,0,0,0.8);
    }

    .btn-metal::after {
      content: "";
      position: absolute;
      top: 2px;
      left: 2px;
      right: 2px;
      height: 50%;
      background: linear-gradient(
        to right,
        rgba(255,255,255,0.2) 0%,
        rgba(255,255,255,0.1) 100%
      );
      border-radius: 4px 4px 0 0;
    }

    .btn-metal:hover {
      background: linear-gradient(
        to right,
        #555 0%,
        #777 50%,
        #555 100%
      );
    }

    /* 5. 脉冲呼吸按钮（动态呼吸+渐变） */
    .btn-pulse {
      background: #ec4899;
      box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.7);
      animation: pulseKK 2s infinite;
    }

    @keyframes pulseKK {
      0% {
        box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.6);
      }
      70% {
        box-shadow: 0 0 0 15px rgba(236, 72, 153, 0);
      }
      100% {
        box-shadow: 0 0 0 30px rgba(236, 72, 153, 0);
      }
    }

    .btn-pulse:hover {
      background: #db2777;
      animation: pulse 1s infinite;
    }

    /* 6. 文字填充按钮（hover时文字渐变填充） */
    .btn-text-fill {
      background: #111;
      border: 2px solid #3b82f6;
      color: #fff;
    }

    .btn-text-fill::before {
      content: attr(data-text);
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 100%;
      background: linear-gradient(135deg, #3b82f6, #8b5cf6);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      transition: width 0.5s ease;
    }

    .btn-text-fill:hover::before {
      width: 100%;
    }

    /* 7. 破碎玻璃按钮（hover时裂纹动效） */
    .btn-glass-break {
      background: #06b6d4;
    }

    .btn-glass-break::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: 
        linear-gradient(45deg, transparent 45%, rgba(255,255,255,0.1) 45%, rgba(255,255,255,0.1) 55%, transparent 55%),
        linear-gradient(-45deg, transparent 45%, rgba(255,255,255,0.1) 45%, rgba(255,255,255,0.1) 55%, transparent 55%);
      background-size: 8px 8px;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .btn-glass-break:hover {
      transform: scale(1.05);
      box-shadow: 0 0 20px rgba(6, 182, 212, 0.8);
    }

    .btn-glass-break:hover::before {
      opacity: 1;
    }

    /* 8. 暗黑火焰按钮（火焰动效+渐变） */
    .btn-fire {
      background: linear-gradient(135deg, #f97316, #ef4444);
      color: #fff;
      text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    }

    .btn-fire::before {
      content: "";
      position: absolute;
      top: -5px;
      left: -5px;
      right: -5px;
      bottom: -5px;
      background: linear-gradient(135deg, #f97316, #ef4444);
      border-radius: 12px;
      z-index: -1;
      filter: blur(10px);
      opacity: 0.7;
      transition: opacity 0.3s ease;
    }

    .btn-fire:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 20px rgba(249, 115, 22, 0.4);
    }

    .btn-fire:hover::before {
      opacity: 1;
    }