.pulse-button {
    font-size: 26px;
    border-radius: 50%;
    animation: borderPulse 1000ms infinite ease-out, shake 1s infinite ease-in-out;
}

@keyframes borderPulse {
    0% {
        box-shadow: inset 0px 0px 0px 5px rgba(255, 255, 255, .4), 0px 0px 0px 0px rgba(255, 255, 255, 1);
    }
    100% {
        box-shadow: inset 0px 0px 0px 1px rgba(117, 117, 255, .2), 0px 0px 0px 3px rgba(255, 255, 255, 0);
    }
}

@keyframes shake {
    0% {
        color: #999;
    }
    100% {
        color: #555;
    }
}

.animated-border-button {
    font-size: 26px;
    border-radius: 50%;
    position: relative;
    border: 2px solid transparent; /* Initial transparent border */
    animation: drawBorder 5s infinite linear; /* Infinite loop with smooth progression */
}

@keyframes drawBorder {
    0% {
        border-top: 2px solid rgba(117, 117, 255, 0);
        border-right: 2px solid rgba(117, 117, 255, 0);
        border-bottom: 2px solid rgba(117, 117, 255, 0);
        border-left: 2px solid rgba(117, 117, 255, 0);
    }
    10% {
        border-top: 2px solid rgba(117, 117, 255, 0.25); /* Light color, starts appearing */
    }
    20% {
        border-top: 2px solid rgba(117, 117, 255, 0.5);
    }
    30% {
        border-top: 2px solid rgba(117, 117, 255, 0.75);
    }
    40% {
        border-top: 2px solid rgba(117, 117, 255, 1);
    }
    50% {
        border-right: 2px solid rgba(117, 117, 255, 0.25); /* Right border starts drawing */
    }
    60% {
        border-right: 2px solid rgba(117, 117, 255, 0.5);
    }
    70% {
        border-right: 2px solid rgba(117, 117, 255, 0.75);
    }
    80% {
        border-right: 2px solid rgba(117, 117, 255, 1);
    }
    90% {
        border-bottom: 2px solid rgba(117, 117, 255, 0.25); /* Bottom border starts drawing */
    }
    100% {
        border-bottom: 2px solid rgba(117, 117, 255, 1); /* Full color */
        border-left: 2px solid rgba(117, 117, 255, 0.25); /* Left border starts drawing */
    }
}