const handleClick = (event: MouseEvent) => {
  const button = event.currentTarget as HTMLElement;

  // 計算點擊位置
  const rect = button.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;

  // 創建一個新的水波紋元素
  const ripple = document.createElement('span');
  ripple.style.left = `${x}px`;
  ripple.style.top = `${y}px`;

  // 將水波紋元素添加到按鈕中
  button.appendChild(ripple);

  // 觸發水波紋動畫
  ripple.classList.add('ripple');

  // 動畫結束后移除水波紋元素
  setTimeout(() => {
    ripple.remove();
  }, 500);
};

.button-style {
    border-width: 0 !important;
    box-shadow: 0 1px 4px 0 rgba(80, 110, 228, 0.5) !important;
    background: linear-gradient(14deg, #506ee4 0%, rgba(80, 110, 228, 0.6)) !important;
    position: relative;
    overflow: hidden;
    z-index: 1;

    // &::before {
    //     content: '';
    //     position: absolute;
    //     top: 0;
    //     left: 0;
    //     width: 100%; // 確保偽元素覆蓋整個按鈕
    //     height: 100%; // 確保偽元素覆蓋整個按鈕
    //     background: rgba(255, 255, 255, 0.2); // 白色半透明遮罩
    //     opacity: 0;
    //     transition: opacity 0.3s ease-in-out;
    //     z-index: 2; // 確保遮罩層在按鈕內容之上
    //     pointer-events: none; // 防止遮罩層影響按鈕的點擊和懸停事件
    // }

    // &:hover::before {
    //     opacity: 1;
    // }
    &>span.ripple {
        position: absolute;
        width: 0;
        height: 0;
        background: rgba(255, 255, 255, 0.5); // 白色半透明遮罩
        border-radius: 50%;
        transform: translate(-50%, -50%);
        animation: ripple 0.5s ease-out forwards;
    }

    @keyframes ripple {
        to {
            width: 200px;
            height: 200px;
            opacity: 0;
        }
    }
}