Rimuovere interno Gradiente In cima Bootstrap 3 Button quando si fa clic

Question

Potete per favore fatemelo sapere come posso rimuovere il gradiente dalle Bootstrap 3 pulsanti quando gli utenti fanno clic sui pulsanti: come quello che sta mostrando nell'immagine qui sotto:

.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

un'ombra casella viene applicata durante il : stato attivo del pulsante.

Prova questo:

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

Answer 2

Che cosa si vuole fare è togliere il box-shadow quando il pulsante si trova nello stato active (è premuto). Ecco un modo compatibile per browser:

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

Answer 3

Imposta posizione insieme con.

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