web-dev-qa-db-ja.com

Bootstrapカスタマイズでボタンのホバーカラーを変更する

ホバーによってボタンが暗い色ではなく明るい色になるようにボタンのスタイルを設定しようとしています。 bootstrap=カスタマイズページ（ http://getbootstrap.com/customize/ ）を試しましたが、ボタンのホバーカラーを変更するオプションが表示されません。 CSSを調べて手動でこれを試してみましたが、ボタンがどのようにホバー色になっているのかわかりません。別のbootstrapカスタマイズウェブサイト

http://pikock.github.io/bootstrap-magic/app/#!/editor

メインの色を＃0495c9、ホバーの色を＃00b3dbにしたかったのですが、ボタンのbgの色のみを指定でき、ホバーの色は指定できません。

どんな助けでも大歓迎です

htmlcssresponsive-designtwitter-bootstrap-3
24
Amir Shadaab Mohammed

ボタンの色はbtn-xクラス（例：btn-primary、btn-success）から取得されるため、独自のカスタムcssルールを記述して手動で色を変更する場合は、変更する必要があります。

/*This is modifying the btn-primary colors but you could create your own .btn-something class as well*/
.btn-primary {
    color: #fff;
    background-color: #0495c9;
    border-color: #357ebd; /*set the color you want here*/
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #00b3db;
    border-color: #285e8e; /*set the color you want here*/
}
56
jme11

またはこれを行うことができます...
すべてのbtnを設定します（クラス名：.btn- + $theme-colors: map-merge）一度にスタイル：

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @include button-variant($value, $value,
    // modify
    $hover-background: lighten($value, 7.5%),
    $hover-border: lighten($value, 10%),
    $active-background: lighten($value, 10%),
    $active-border: lighten($value, 12.5%)
    // /modify
    );
  }
}

// code from "node_modules/bootstrap/scss/_buttons.scss"

カスタマイズscssファイルに追加する必要があります。

2
Hel Lo

これは、btnの色を変更する正しい方法です。

 .btn-primary:not(:disabled):not(.disabled).active, 
    .btn-primary:not(:disabled):not(.disabled):active, 
    .show>.btn-primary.dropdown-toggle{
        color: #fff;
        background-color: #F7B432;
        border-color: #F7B432;
    }
0
kamlesh.halduniya