How can I make the click of a bootstrap 5 button more visually noticeable?

It's hard to see that a bootstrap 5 primary button has been clicked. This presents UX problems as it's not clear whether the button "thinks" it's been clicked. I.e., if the user doesn't touch the button quite right (no click registered) or they DO but the website is slow to respond.

I can override the CSS myself to make it more noticeable but I'm wondering if there is any built in way to make it more noticeable.

This CSS will do the trick: It animates a border around the button and also shrinks the button slightly. Together they give the indication the button has been clicked.

Applies it to the bootstrap btn-primary and btn-secondary when they are clicked.

 
.btn-primary:active,
        .btn-secondary:active {
            animation: borderPulse 0.8s ease;
            transform: scale(.9);
            /* Slight scale down for extra feedback */
            box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.7);
            /* Initial state for animation */
        }

        /* Make sure animation works in all contexts */
        .btn-primary:focus:active {
            animation: borderPulse 0.8s ease;
        }