ブートストラップボタンアクティブな色の変化

Question

：

<button type="button" class="btn btn-success navbar-btn">Login</button> 

今、色は大丈夫です緑を示しています。ボタンをクリックするたびに、ボタンが暗い色の緑色に変わります。私が望むのは、ボタンが色を変えずに、デフォルトのブートストラップカラーのままにし、その周りの青いアウトラインを削除するようにすることです。

青いアウトラインの場合、アウトラインをnoneに設定しようとしましたが、何らかの理由で機能しませんでした。私たちは

.btn : active:focus { 

} 

を使用する必要があります知っている。しかし、私はそれを考え出すことの困難を抱えているので、私は、ブートストラップ成功ボタンのデフォルトの色を知りません。

Answer 1

これはbtn-success次のとおりです。

.btn-success { 
    color: #fff; 
    background-color: #5cb85c; 
    border-color: #4cae4c; 
} 

.btn-success:hover { 
    color: #fff; 
    background-color: #449d44; 
    border-color: #398439; 
} 

.btn-success:active:hover { 
    color: #fff; 
    background-color: #398439; 
    border-color: #255625; 
} 

だからあなただけのボタンがアクティブになっているときあなたはまた、青い枠を削除するにはoutline: none !important;を追加することができ、デフォルトのスタイルのための!important（最初のCSSブロック） を追加する必要があり

Answer 2

btn-successのデフォルトの色は＃5cb85cです。あなたはDevToolsでそれを調べるか、ブートストラップスタイルシートを検索して、このクラスに関係するすべてのルールを見つけ出し、自分のスタイルシートで必要なものを変更してそれらを上書きするだけです。 !importantを使用する必要はありません。特異性はあなたの友人です。 MDN Specificityを参照してください。

（この例では一例として、同じベースカラーにすべての状態を変更しても同様の箱shadowプロパティを削除します。あなたがここから何が必要に変更することができるはずです。）

作業スニペットを参照してください。

.btn.btn-success { 
 
    color: #fff; 
 
    background-color: #5cb85c; 
 
    border-color: #5cb85c; 
 
} 
 
.btn.btn-success.focus, 
 
.btn.btn-success:focus { 
 
    color: #fff; 
 
    background-color: #5cb85c; 
 
    border-color: #5cb85c; 
 
    outline: none; 
 
    box-shadow: none; 
 
} 
 
.btn.btn-success:hover { 
 
    color: #fff; 
 
    background-color: #5cb85c; 
 
    border-color: #5cb85c; 
 
    outline: none; 
 
    box-shadow: none; 
 
} 
 
.btn.btn-success.active, 
 
.btn.btn-success:active { 
 
    color: #fff; 
 
    background-color: #5cb85c; 
 
    border-color: #5cb85c; 
 
    outline: none; 
 
} 
 
.btn.btn-success.active.focus, 
 
.btn.btn-success.active:focus, 
 
.btn.btn-success.active:hover, 
 
.btn.btn-success:active.focus, 
 
.btn.btn-success:active:focus, 
 
.btn.btn-success:active:hover { 
 
    color: #fff; 
 
    background-color: #5cb85c; 
 
    border-color: #5cb85c; 
 
    outline: none; 
 
    box-shadow: none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">Brand</a> 
 
     <button type="button" class="btn btn-success navbar-btn">Changed BTN</button> 
 
     <button type="button" class="btn btn-info navbar-btn">Default BTN</button> 
 
    </div> 
 
    </div> 
 
</nav>

Answer 3

私はbtn-successため、元のスタイル設定を取り、4色があります気づきました。私はそれらを抽出し、色相を回転させた。その後、対応する色をすべて置き換えました。

/** 
 

 
Original colors 
 
=============== 
 
#28a745 
 
#218838 <-- rgba(40, 167, 69, 0.5) 
 
#1e7e34 
 
#1c7430 
 

 
Updated colors 
 
=============== 
 
#8a458f 
 
#703975 <-- rgba(112, 57, 117, 0.5) 
 
#69346c 
 
#613064 
 

 
*/

.btn.btn-success { 
 
    color: #fff; 
 
    background-color: #8a458f; 
 
    border-color: #8a458f; 
 
} 
 
.btn.btn-success:hover { 
 
    color: #fff; 
 
    background-color: #703975; 
 
    border-color: #69346c; 
 
} 
 
.btn.btn-success:focus, .btn-success.focus { 
 
    box-shadow: 0 0 0 0.2rem rgba(112, 57, 117, 0.5); 
 
} 
 
.btn.btn-success.disabled, .btn-success:disabled { 
 
    color: #fff; 
 
    background-color: #8a458f; 
 
    border-color: #8a458f; 
 
} 
 
.btn.btn-success:not(:disabled):not(.disabled):active, 
 
.btn.btn-success:not(:disabled):not(.disabled).active, 
 
.show > .btn-success.dropdown-toggle { 
 
    color: #fff; 
 
    background-color: #69346c; 
 
    border-color: #613064; 
 
} 
 
.btn.btn-success:not(:disabled):not(.disabled):active:focus, 
 
.btn.btn-success:not(:disabled):not(.disabled).active:focus, 
 
.show > .btn.btn-success.dropdown-toggle:focus { 
 
    box-shadow: 0 0 0 0.2rem rgba(112, 57, 117, 0.5); 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-light bg-light"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">NavBar</a> 
 
     <button type="button" class="btn btn-success navbar-btn">Modified Button</button> 
 
     <button type="button" class="btn btn-info navbar-btn">Regular Button</button> 
 
    </div> 
 
    </div> 
 
</nav>

---

ここで私は、リバースエンジニアリングSASSです。

/** SASS */ 
$color-text: #ffffff 
$color-highlight: #8a458f 
$color-light: #703975 
$color-dark: #69346c 
$color-shadow: #613064 
$box-shadow: 0 0 0 0.2rem transparentize($color-light, 0.5) 

.btn-success 
    color: $color-text 
    background-color: $color-highlight 
    border-color: $color-highlight 
    &:hover 
    color: $color-text 
    background-color: #703975 
    border-color: $color-dark 
    &:focus, &.focus 
    box-shadow: $box-shadow 
    &.disabled, &:disabled 
    color: $color-text 
    background-color: $color-highlight 
    border-color: $color-highlight 
    &:not(:disabled):not(.disabled) 
    &:active, &.active 
     color: $color-text 
     background-color: $color-dark 
     border-color: $color-shadow 
.show 
    >.btn-success.dropdown-toggle 
    color: $color-text 
    background-color: $color-dark 
    border-color: $color-shadow 
    >.btn-success.dropdown-toggle:focus 
    box-shadow: $box-shadow 
.btn-success:not(:disabled):not(.disabled) 
    &:active:focus, &.active:focus 
    box-shadow: $box-shadow