Removing the internal gradient on top of the Bootstrap 3 button when pressed

Question

Could you tell me how I can remove the gradient from Bootstrap 3 buttons when users click on buttons: as shown in the following image:

.btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; } .btn:focus, .btn:active:focus, .btn.active:focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .btn:hover, .btn:focus { color: #333; text-decoration: none; } .btn:active, .btn.active { background-image: none; outline: 0; -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); } 

Answer 1

When pressed : the active button of the button applies a window shadow.

Try the following:

 .btn:active { box-shadow:none; } 

Answer 2

What you want to do is remove box-shadow when the button is in active state (pressed). Here is a tiny browser capable of doing this:

 .btn:active{ -webkit-box-shadow: none; box-shadow: none; -webkit-transition: none; transition: none; } 

Answer 3

Set position relative to.

 button:active { position: relative; top: -1px; left: -1px; }