Bootstrap Button remains in strange state after click

Question

Stack:

Problem

I've got this Bootstrap Button:

After clicking the button and minding my business it looks like this and I have no idea why, or how to change it. Any help is appreciated.

When overriding the :focus state with my default specs the button will look as its supposed to, but now the hover transition does not change.

Button Styling:

The button is styled like this:

import styled from 'styled-components';
import { Button } from 'react-bootstrap';
import { device } from '@/Components/styles';

export const LoginButton = styled(Button)`
    border-radius: 5px;
    border: solid 2px;

    background: #e28215;
    color: white;
    border-color: white;
    font-weight: 900;

    font-size: 14px;
    padding: 5px 10px;
    ${device.sm} {
        font-size: 16px;
        padding: 10px 20px;
    }
    ${device.md} {
        font-size: 18px;
        padding: 10px 30px;
    }

    transition: all 0.2s ease-in-out;

    -webkit-box-shadow: 0 24px 38px 3px #f7f7f72e, 0 9px 46px 8px #ffffff2b, 0 11px 15px -7px #000;
    box-shadow: 0 24px 38px 3px #f7f7f72e, 0 9px 46px 8px #ffffff2b, 0 11px 15px -7px #000;

    &:hover {
        background: #ffffff;
        color: #e28215;
        border-color: #e28215;
        -webkit-box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12),
            0 11px 15px -7px rgba(0, 0, 0, 0.2);
        box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12),
            0 11px 15px -7px rgba(0, 0, 0, 0.2);

        font-size: 16px;
        padding: 5px 10px;
        ${device.sm} {
            margin-top: -6px;
            font-size: 18px;
            padding: 12px 22px;
        }
        ${device.md} {
            margin-top: -6px;
            font-size: 20px;
            padding: 12px 34px;
        }
    }
`;

I've also put a bit of color customization into my bootstrap via theming like this in my custom.bootstrap.scss:

$theme-colors: (
    'primary': #e28215,
    'secondary': #83b8f3,
    'tertiary': #1575e2,
    ...
);

Additional Info:

I've also looked into the states and when the button is in the stage state it seems like it is not active or anything:

Thx @evolutionxbox I should probably mention that I did play around with these states and tried various combinations in the CSS. unfortunately to no avail. — Fabian Bosler, Jul 21 '20 at 09:26
It’s almost certainly the bootstrap active state https://react-bootstrap.github.io/components/buttons/#active-state — evolutionxbox, Jul 21 '20 at 09:37
@evolutionxbox which means I should be able to fix it via adding a css of `&:active { desired state }` no - which does not work (just tried adding the css of the base button to active, seems its getting either overwritten from somewhere else or its a different state) — Fabian Bosler, Jul 21 '20 at 09:46
Do you know about CSS specificity, the cascade, and how styles override? — evolutionxbox, Jul 21 '20 at 09:47
@evolutionxbox I thought so. figured the styling on the element itself has precedence. But your remark suggests that this it not the case. Seems to be the :focus state (+ something else) — Fabian Bosler, Jul 21 '20 at 09:51
https://stackoverflow.com/questions/19053181/how-to-remove-focus-around-buttons-on-click#answer-37580028 this seems to do it! — Fabian Bosler, Jul 21 '20 at 10:01
Please don’t ever do that. Please. http://www.outlinenone.com — evolutionxbox, Jul 21 '20 at 10:03
@evolutionxbox but thats not what I am doing. I liked a specific answer to preventDefault on mousedown. — Fabian Bosler, Jul 21 '20 at 10:19

Bootstrap Button remains in strange state after click

Stack:

Problem

Button Styling:

Additional Info:

0 Answers0