I have been struggling with the issue of removing the box-shadow effect from Bootstrap 4 buttons. I searched for solutions on various forums but couldn't find one that worked for me. So, I decided to try some custom CSS code I found online. I was able to remove the blue box-shadow effect on button click, but I noticed that the button was resizing back to its original size after being clicked, which is not what I wanted.
Here is 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;
}
And here is my HTML:
<button id="ok_but" class="btn btn-primary btn-block" name="login">
Login
</button>