Cómo cambiar el color btn en Bootstrap


81

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

Simplemente puede crear override_default.css e incluirlo en la siguiente línea inmediata para bootstrap library css, y luego puede anular cualquier cosa.
art-fan-vikram

Respuestas:


29

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

También creo que la creación de una versión personalizada de Bootstrap debería ser la forma ideal de hacerlo, ya que puede haber muchas propiedades que cambiar. Gracias.
Sam

en el paso 3 - Intento crear MENOS mixin usando .btn-primary, pero: hover no funciona. ¿Cómo debo mezclar el estado de desplazamiento?
Yevgeniy Afanasyev

78

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.


8
¡ !importantEra la clave!
cdonts

5
Esa no es una buena manera de modificar Bootstrap, los cambios deben realizarse a través de las variables Less o Sass al crear su propio Bootstrap CSS personalizado.
Tim

Si solo enlaza a bootstrap antes de enlazar a su hoja de estilo personalizada, entonces su hoja de estilo personalizada tendrá prioridad.
dillon.harless

42

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 ?


Esta publicación me ayudó a crear un botón morado como se ve en la página de inicio de Bootstrap.
priyamtheone

Y para los tontos como yo, tenga en cuenta que debe hacer la anulación DESPUÉS de importar el bootstrap, porque esa importación contiene las cosas que está a punto de incluir y redefinir.
philw

34

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


Luego está el color del borde, que sigue siendo azul. Supongo que menos es el camino a seguir para esto, ¿verdad?
Sam

También puede redefinir el borde.
Semyon Zhikharev

También tuve que cambiar la imagen de fondo antes de que cambiara de color: background-image: -webkit-linear-gradient(top,#8064A2 0,#8064A2 100%);o background-image: none;.
SharpC


6

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

Viste el problema que otros no vieron, pero esto no lo soluciona para mí.
Steve Lautenschlager

4

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

4

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

3

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>


1

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

0

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.


0

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);
}
  1. Descargue un compilador SASS como Koala para que el archivo SCSS anterior se pueda compilar en CSS.
  2. Clone el repositorio github de Bootstrap porque el compilador necesita los mixins de variante de botón en algún lugar.
  3. 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";
  1. Compile btnCustom.scsscon el compilador descargado anteriormente en css.

0

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.