/* 按钮基础样式 */
.ripple-button {
    position: relative;
    display: inline-block;
    padding: 12px 24px;
    font-size: 16px;
    color: #87CEEB;
    background-color: transparent;
    border: 2px solid #87CEEB;
    border-radius: 8px;
    cursor: pointer;
    outline: none;
    overflow: hidden;
    /* 添加渐变效果，包括背景色和文字颜色 */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

/* 按钮完全填充天蓝色效果 */
.ripple-button.ripple-filled {
    background-color: #87CEEB;
    color: #fff;
}

/* 按钮松手效果 */
.ripple-button.ripple-release {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: transparent;
    color: #87CEEB;
}

/* 涟漪元素基础样式 */
.ripple {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
}

/* 普通点击的涟漪效果 */
.ripple:not(.ripple-long) {
    background: rgba(135, 206, 235, 0.8);
    animation: rippleEffect 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 长按的涟漪效果 */
.ripple.ripple-long {
    background: #87CEEB;
    animation: rippleLongEffect 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 普通涟漪动画 */
@keyframes rippleEffect {
    0% {
        width: 0;
        height: 0;
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(0);
    }
    100% {
        width: 300px;
        height: 300px;
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* 长按涟漪动画 */
@keyframes rippleLongEffect {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
        transform: translate(-50%, -50%) scale(0);
    }
    100% {
        width: 1000px;
        height: 1000px;
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}