css - react - Cómo cambiar el color btn en Bootstrap

react bootstrap tooltip css

Question

¿Hay alguna manera de cambiar todas .btn propiedades .btn en Bootstrap? He probado los siguientes, pero aún así a veces muestra el color azul predeterminado (por ejemplo, después de hacer clic y quitar el mouse, etc.). ¿Cómo puedo cambiar todo el tema por completo?

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

Answer 1

Aquí está mi sabor sin perder el vuelo estacionario. ¡Personalmente me gusta más que la transición de arranque estándar!

HTML :

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

CSS:

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

Answer 2

Creo que usar !important no es una opción muy acertada. Puede causar muchos otros problemas, especialmente al hacer que el sitio responda. Entonces, entiendo que, la mejor manera de hacer esto es usar la clase CSS de botón personalizado con la clase .btn bootstrap. .btn es la clase de estilo base para el botón de arranque. Por lo tanto, manténgalo como diseño, podemos cambiar otros estilos usando nuestra clase css personalizada. Una cosa más que quiero mencionar aquí. Algunas personas están tratando de 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 color de outline-color: lugar.

Answer 3

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í.

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

Answer 4

La forma más fácil de ver qué propiedades necesita anular es mirar el código fuente de Bootstrap , específicamente el mixin .button-variant definido en mixins/buttons.less . Aún necesita anular muchas propiedades para deshacerse de todo el estilo .btn-primary (por ejemplo :focus , disabled , uso en 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, por ejemplo .btn-whatever
3. Use un compilador MENOS y use el mixin .button-variant para crear su propia clase de color, por ejemplo .btn-whatever

Answer 5

Me encontré con un problema similar recientemente 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 [disabled] y [disabled]: pase el mouse, si esta clase se usa en la entrada [type = submit]. Me gusta esto:

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

Answer 6

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

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

Espero que esto funcione para ti.

Answer 7

Simplemente cree su propio botón en:

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

Salud

Answer 8

Supongo que olvidó .btn-primary:focus propiedad de .btn-primary:focus y coma después de .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;
}

Answer 9

Te has perdido un estilo ".btn-primary: active: focus" que hace que aún durante btn el color predeterminado de arranque aparezca 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;}

Answer 10

Actualización de 2019 para Bootstrap 4

Ahora que Bootstrap 4 usa SASS, puede cambiar fácilmente el color del botón primario usando los mixins de 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 ( 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 para todas las clases, consulte: Personalizar la plantilla CSS Bootstrap y ¿Cómo cambiar el color primario Bootstrap ?