Изменение цвета курсора на кнопке с настройкой Bootstrap

Я пытаюсь стилизовать свои кнопки таким образом, чтобы наведение заставляло кнопку более светлого оттенка вместо более темного оттенка. Я попробовал страницу настройки загрузки (http://getbootstrap.com/customize/), и это не дает мне возможность изменить цвет наведения кнопки. Я попытался сделать это вручную, проверив CSS, но неясно, как кнопки получают цвет наведения. Я попробовал еще один сайт настройки сайта bootstrap

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

Я хотел, чтобы основной цвет был # 0495c9, а цвет наведения - # 00b3db, но я могу указать только цвет кнопки bg, а не цвет наведения.

Любая помощь будет оценена

Ответ 1

Цвет для ваших кнопок поступает из классов 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*/
}

Ответ 2

или может сделать это...
установить все стили 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.

Ответ 3

Сначала импортируйте только те части бутстрапа, которые вы на самом деле используете. Затем переопределите кнопки mixin со своим.

Ответ 4

Это правильный способ изменить цвет 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;
    }

Ответ 5

Мне пришлось добавить !important, чтобы заставить его работать. Я также сделал свой собственный класс button-primary-override.

.button-primary-override:hover, 
.button-primary-override:active,
.button-primary-override:focus,
.button-primary-override:visited{
    background-color: #42A5F5 !important;
    border-color: #42A5F5 !important;
    background-image: none !important;
    border: 0 !important;
}