Don't change interface of Button when clicked-CodePudding

Disclaimer: Never worked with CSS before, first time having a front end task related to styling so I'm sorry for any misconceptions, wrong usage of words etc.

I'm having this dummy button that opens up a Modal (1):

So when I click it, a modal pops up and the button becomes like this (2):

As you can see, the button has a border (?) when clicked, looks like it's a click held or whatever. So when the modal is opened, if I click anywhere on the screen the button turns to (3):

No border in this picture like in (2). This is a simple button component:

<button className={`btn position-relative  ${className}`} onClick={onClick}>
...
</button>

and the component where it opens the Modal has the following code:

<Button onClick={() => setModal(true)} className={'btn btn-primary mr-2'}>
  (info icon)
</Button>

Do you know how can I achieve after clicking (1) to make the button like in (3) and not like in (2)?

CodePudding user response：

Bootstrap ( from it's partial scss file _buttons.scss ) adds a box-shadow ( blueish color) by default to the button when focused ( = clicked )

This is the style

 .btn.focus, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
 }

So what you should do is remove that ( overwrite it ) in your own stylesheet. Keep in mind that you should use a more specific selector. Using just .btn:focus { } won't overwrite it. In the example below i used the tag name also button.btn:focus {}

button.btn:focus {
  box-shadow: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn">Button</button>

P.S. You can 'inspect' the styles added on different states ( hover, focus, active ) on any element using the dev tools provided by each modern browser

CodePudding user response：

try this ______________________________________________________

.btn-primary:focus{
  outline: none !important;
  box-shadow: none !important;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>



<button type="button" class="btn btn-primary">Save changes</button>