Как изменить цвет btn в Bootstrap

Ответ 1

Самый простой способ увидеть, какие свойства вам нужно переопределить, - это посмотреть исходный код начальной загрузки, в частности, установленный .button-variant mixin в mixins/buttons.less. Вам все равно нужно переопределить довольно много свойств, чтобы избавиться от всего стиля .btn-primary (например, :focus, disabled, использования в выпадающих меню и т.д.).

Лучшим способом может быть:

• Создайте собственную версию Bootstrap с помощью Инструмент настройки загрузки Bootstrap
• Вручную создайте свой собственный класс цветов, например. .btn-whatever
• Используйте компилятор LESS и используйте mixin .button-variant, чтобы создать свой собственный класс цветов, например. .btn-whatever

Ответ 2

Если вы хотите переопределить любые свойства по умолчанию в бутстрапе, вы должны сделать свойства важными.

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #8064A2 !important;
}

Надеюсь, это сработает для вас.

Ответ 3

Я предполагаю, что вы забыли свойство .btn-primary:focus и запятую после .btn-primary

Вы также можете использовать меньше и переопределить некоторые цвета в файле variables.less

С учетом этого ваш код будет выглядите так:

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
    background-color: #8064A2;
    border-color: #8064A2;
}

Ответ 4

2019 Обновление для Bootstrap 4

Теперь, когда Bootstrap 4 использует SASS, вы можете легко изменить основной цвет кнопки, используя вариации button-variant:

$mynewcolor:#77cccc;

.btn-primary {
    @include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%));
}

.btn-outline-primary {
    @include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor);
}

https://www.codeply.com/go/2bHYxYSC0n (демонстрация SASS)

Этот SASS компилируется в следующий CSS...

.btn-primary {
    color: #212529;
    background-color: #7cc;
    border-color: #5bc2c2
}

.btn-primary:hover {
    color: #212529;
    background-color: #52bebe;
    border-color: #8ad3d3
}

.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 .2rem rgba(91, 194, 194, 0.5)
}

.btn-primary.disabled,
.btn-primary:disabled {
    color: #212529;
    background-color: #7cc;
    border-color: #5bc2c2
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle {
    color: #212529;
    background-color: #9cdada;
    border-color: #2e7c7c
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(91, 194, 194, 0.5)
}

.btn-outline-primary {
    color: #7cc;
    background-color: transparent;
    background-image: none;
    border-color: #7cc
}

.btn-outline-primary:hover {
    color: #222;
    background-color: #8ad3d3;
    border-color: #7cc
}

.btn-outline-primary:focus,
.btn-outline-primary.focus {
    box-shadow: 0 0 0 .2rem rgba(119, 204, 204, 0.5)
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    color: #7cc;
    background-color: transparent
}

.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show>.btn-outline-primary.dropdown-toggle {
    color: #212529;
    background-color: #8ad3d3;
    border-color: #7cc
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(119, 204, 204, 0.5)
}

https://www.codeply.com/go/lD3tUE01lo (демонстрация CSS)

Чтобы изменить основной цвет для всех классов, смотрите: Настройка CSS-шаблона начальной загрузки и Как изменить основной цвет начальной загрузки?

Ответ 5

Просто создайте свою собственную кнопку:

• http://blog.koalite.com/bbg/
• добавьте CSS в конец вашего boottrap.min.css

Приветствия

Ответ 6

Вы пропустили один стиль ".btn-primary: active: focus", который вызывает то, что еще во время btn click default bootstrap цвет появляется на секунду. Это работает в моем коде:

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited, .btn-primary:focus, .btn-primary:active:focus {
background-color: #8064A2;}

Ответ 7

Недавно я столкнулся с подобной проблемой и смог ее исправить добавлением классов

  body .btn-primary {
    background-color: #7bc143;
    border-color: #7bc143;
    color: #FFF; }
    body .btn-primary:hover, body .btn-primary:focus {
      border-color: #6fb03a;
      background-color: #6fb03a;
      color: #FFF; }
    body .btn-primary:active, body .btn-primary:visited, body .btn-primary:active:focus, body .btn-primary:active:hover {
      border-color: #639d34;
      background-color: #639d34;
      color: #FFF; }

Также обратите внимание на [disabled] и [disabled]: hover, если этот класс используется на входе [type = submit]. Вот так:

body .btn-primary[disabled], body .btn-primary[disabled]:hover {
  background-color: #7bc143;
  border-color: #7bc143; }

Ответ 8

Я думаю, что использование !important не очень мудрый вариант. Это может вызвать многие другие проблемы, особенно при реагировании сайта. Итак, я понимаю, что это лучший способ сделать это, чтобы использовать пользовательский класс CSS с классом .btn bootstrap. .btn - базовый стиль для кнопки загрузки. Итак, держите это как макет, мы можем изменить другие стили, используя наш собственный класс css. Еще одна дополнительная вещь, которую я хочу упомянуть здесь. Некоторые люди пытаются удалить синий контур с кнопок. Это не очень хорошая идея, потому что проблема доступности при использовании клавиатуры. Измените цвет с помощью outline-color:.

Ответ 9

Удалите класс цвета кнопки, такой как "btn-success", поместите пользовательский класс, такой как "btn-custom", и напишите css для этого класса. Это просто работает для меня.

HTML :

<button class="btn btn-block login " type="submit">Sign In</button>

CSS:

 .login  {
    background-color: #0057fc;
    color: white;   
}

Ответ 10

Здесь мой аромат без потери парения. Мне лично это нравится больше, чем стандартный переход с начальной загрузкой!

.btn-primary, .btn-primary:active, .btn-primary:visited {
    background-color: #8064A2 !important;
}

.btn-primary:hover {
    background-color: #594671 !important;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
}