Cómo cambiar el color btn en Bootstrap

¿Hay alguna forma de cambiar todas las .btnpropiedades en Bootstrap? He probado los siguientes, pero a veces todavía muestra el color azul predeterminado (por ejemplo, después de hacer clic y quitar el mouse, etc.). ¿Cómo puedo cambiar todo el tema?

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

La forma más fácil de ver qué propiedades necesita anular es echar un vistazo al código fuente de Bootstrap , específicamente el .button-variantmixin definido en mixins / buttons.less . Todavía es necesario para anular un buen montón de propiedades para deshacerse de todo el .btn-primaryestilo (por ejemplo :focus, disabled, el uso de menús desplegables, etc.).

Una mejor manera podría ser:

1. Cree su propia versión personalizada de Bootstrap utilizando la herramienta de personalización en línea de Bootstrap
2. Cree manualmente su propia clase de color, p. Ej. .btn-whatever
3. Use un compilador LESS y use el .button-variantmixin para crear su propia clase de color, por ejemplo.btn-whatever

Si desea anular cualquier propiedad predeterminada en bootstrap, debe hacer que las propiedades sean importantes.

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

Espero que esto funcione para ti.

Actualización de 2019 para Bootstrap 4

Ahora que Bootstrap 4 usa SASS, puede cambiar fácilmente el color del botón principal usando los button-variantmixins:

$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 ( demostración de SASS )

Este SASS se compila en el siguiente 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 ( demostración de CSS )

Para cambiar el color primario de todas las clases, consulte: Personalización de la plantilla CSS de Bootstrap y ¿Cómo cambiar el color primario de Bootstrap ?

Supongo que olvidó la .btn-primary:focuspropiedad y la coma después .btn-primary

. También puede usar menos y redefinir algunos colores en el archivo variables.less

Con esto en mente, su código se verá así:

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

Simplemente cree su propio botón en:

• http://blog.koalite.com/bbg/
• agregue el CSS al final de su boottrap.min.css

Salud

Se ha perdido un estilo ".btn-primary: active: focus", lo que provoca que aún durante el clic en btn se muestre el color de arranque predeterminado por un segundo. Esto funciona en mi código:

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

Elimine la clase de color del botón como "btn-success" y coloque una clase personalizada como "btn-custom" y escriba css para esa clase. Eso simplemente funciona para mí.

HTML :

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

CSS:

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

La forma más sencilla es:

1) interceptar cada estado de botón

2) agregar !importantpara anular los estados

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
  background-color: black !important;
  border-color: black !important;
}

La forma más práctica de la interfaz de usuario es hacer que el estado de desplazamiento del botón sea más oscuro que el estado original:

.btn-primary {
  background-color: Blue !important;
  border-color: Blue !important;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
  background-color: DarkBlue !important;
  border-color: DarkBlue !important;
}

Aquí está mi sabor sin perder el control. Personalmente, me gusta más que la transición estándar de bootstrap.

.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;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-primary">Hover me!</button>

Recientemente me encontré con un problema similar y logré solucionarlo agregando clases

  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; }

También preste atención a [deshabilitado] y [deshabilitado]: desplazarse, si esta clase se usa en la entrada [tipo = enviar]. Me gusta esto:

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

Creo que usarlo !importantno es una opción muy acertada. Puede causar muchos otros problemas, especialmente al hacer que el sitio responda. Entonces, según tengo entendido, la mejor manera de hacer esto es usar la clase CSS de botón personalizado con la .btnclase bootstrap. .btnes la clase de estilo base para el botón bootstrap. Por lo tanto, mantenga eso como diseño, podemos cambiar otros estilos usando nuestra clase css personalizada. Una cosa más que quiero mencionar aquí. Algunas personas están intentando eliminar el contorno azul de los botones. No es una buena idea porque ese problema de accesibilidad al usar el teclado. Cambie su color usando en su outline-color:lugar.

Agregar una guía paso a paso a la respuesta de @ Codeply-er anterior para los novatos de SASS / SCSS como yo.

1. Guardar btnCustom.scss.

/* import the necessary Bootstrap files */
@import 'bootstrap';

/* Define color */
$mynewcolor:#77cccc;

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

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

2. Descargue un compilador SASS como Koala para que el archivo SCSS anterior se pueda compilar en CSS.
3. Clone el repositorio github de Bootstrap porque el compilador necesita los mixins de variante de botón en algún lugar.
4. Importe explícitamente funciones de arranque creando un _bootstrap.scssarchivo como se muestra a continuación. Esto permitirá al compilador acceder a las funciones y variables de Bootstrap.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/tables";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/utilities";

5. Compile btnCustom.scsscon el compilador descargado anteriormente en css.

No soy el OP de esta respuesta, pero me ayudó:

Quería cambiar el color de los botones siguiente / anterior del carrusel de arranque en mi página de inicio.

Solución: Copie los nombres de los selectores de bootstrap.css y muévalos a su propio style.css (con sus propias preferencias ..):

.carousel-control-prev-icon,
.carousel-control-next-icon {
  height: 100px;
  width: 100px;
  outline: black;
  background-size: 100%, 100%;
  border-radius: 50%;
  border: 1px solid black;
  background-image: none;
}

.carousel-control-next-icon:after
{
  content: '>';
  font-size: 55px;
  color: red;
}

.carousel-control-prev-icon:after {
  content: '<';
  font-size: 55px;
  color: red;
}