How to remove button click animation in bootstrap

Question

Currently, I am dealing with a minor problem regarding buttons in Bootstrap 4.

<button type="submit" class="btn btn-success form-btn">Rechercher</button>

This is how the button appears initially:

However, after clicking on it, the appearance changes once the mouse pointer leaves the button:

The altered look only persists when the mouse returns inside the button or clicked again.

I suspect there might be an issue with the active selector but I'm struggling to identify the root cause of this behavior.

Any assistance in resolving this matter would be greatly appreciated.

Answer 1

Answer №1

It seems like the issue cannot be reproduced. Are you referring to the focus function? https://codepen.io/amitozdeol/pen/dKOLKB

.btn-success:focus, .btn-success.focus {
    box-shadow: none;
}

Using Chrome on MacOS Would you mind sharing the jsfiddle or codepen with us?

Answer 2

It seems like the issue cannot be reproduced. Are you referring to the focus function? https://codepen.io/amitozdeol/pen/dKOLKB

.btn-success:focus, .btn-success.focus {
    box-shadow: none;
}

Using Chrome on MacOS Would you mind sharing the jsfiddle or codepen with us?

Answer 3

The clicking effect was associated with the "btn" class, so I decided to remove it from the button element.

Here is the initial code:

<button type="submit" class="btn btn-success form-btn">Search</button>

After modification, the code looks like this:

<button type="submit" class="btn-success form-btn">Search</button>

Answer 4

The clicking effect was associated with the "btn" class, so I decided to remove it from the button element.

Here is the initial code:

<button type="submit" class="btn btn-success form-btn">Search</button>

After modification, the code looks like this:

<button type="submit" class="btn-success form-btn">Search</button>