CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
user8790423
user8790423

Reputation:

how to remove bootstrap 4 button click effect

I have been facing this problem of removing bootstrap 4 box-shadow button effect, i did read some questions asked by other users here but couldn't find a solution to my problem. So i tried working with some CSS code i got from a site and i successfully removed the blue box-shadow effect from my button (when clicked) but i noticed that whenever a button is been clicked in my site, the button is been resized and set back to its normal size which i don't like.

my css 

#ok_but {
    background-color: #50506F;
    border-color: #50506F;
}
#ok_but:hover   {
    background-color: #3C3C52;
}

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

my html

<button id="ok_but" class="btn btn-primary btn-block" name="login">
    Login
</button>

Upvotes: 3

Views: 12263

Answers (3)

Siro_Diaz
Siro_Diaz

Reputation: 307

You don't need to write extra CSS classes or owerride the base Bootstrap. You can add a shadow-none class to the button. So you don't have to lose the default Bootstrap look and feel. Do this:

<button id="ok_but" class="btn btn-primary btn-block shadow-none" name="login">
    Login
</button>

BUT If you want to override the default Bootstrap i suggest you to modify the variables in Bootstrap SCSS, or use Bootstrap class utilities (composing like Tailwind CSS framework), or, in the last case, rewriting Bootstrap classes like .btn, etc. If you don't have access to the SCSS of Bootstrap, i mean if you are including the bootstrap.css file in your HTML file and you want to override the default Bootstrap behavior, then override the compiled SCSS classes like Bharat Makvana said in his answer.

Upvotes: 4

Bharat Makvana
Bharat Makvana

Reputation: 209

I hope this code will help you to resolve your Problem/issue. If you still face the same problem then please give me the link and snap where the problem arises, I will check it. All the best! happy code :)

.btn-primary:hover,.btn-primary:focus,.btn-primary:active, 
.btn-primary:active:focus:not(:disabled):not(.disabled),
.btn:focus, .btn:active, .btn:hover{
    box-shadow: none!important;
    outline: 0;
}

Upvotes: 9

Nethravathi K
Nethravathi K

Reputation: 7

is this what you wanted? https://jsfiddle.net/Nethravathi/zsm54ptw/6/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Login 

#ok_but:hover{
background-color: #007bff;
border-color: #007bff;

}

Upvotes: -1

Related Questions