Solución:
Actualización de 2019 para Bootstrap 4.1+
Ahora que Bootstrap 4 usa SASS, puede fácilmente cambiar solo el color del botón utilizando el button-variant
mixins. Dado que solo desea cambiar el color del botón principal, y no todo el color del tema principal, debe utilizar el button-variant
mixins en SASS. Puedes configurar lo que sea $mynewcolor
y / o lighten()
y darken()
porcentajes que le gustaría.
$mynewcolor:teal;
.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/f3uTwmsCVZ (Demostración de SASS)
Este SASS se compila en el siguiente CSS …
.btn-primary{color:#fff;background-color:teal;border-color:#005a5a}
.btn-primary:hover{color:#fff;background-color:#004d4d;border-color:#009a9a}
.btn-primary:focus,.btn-primary.focus{box-shadow:0 0 0 .2rem rgba(0,90,90,0.5)}
.btn-primary.disabled,.btn-primary:disabled{color:#fff;background-color:teal;border-color:#005a5a}
.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#00b3b3;border-color:#000}
.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(0,90,90,0.5)}
.btn-outline-primary{color:teal;background-color:transparent;background-image:none;border-color:teal}.btn-outline-primary:hover{color:#222;background-color:#009a9a;border-color:teal}
.btn-outline-primary:focus,.btn-outline-primary.focus{box-shadow:0 0 0 .2rem rgba(0,128,128,0.5)}
.btn-outline-primary.disabled,.btn-outline-primary:disabled{color:teal;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:#fff;background-color:#009a9a;border-color:teal}
.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(0,128,128,0.5)}
https://www.codeply.com/go/l9UGO7J6V1 (Demostración de CSS)
Para cambiar el color primario de todos clases contextuales (bg-primary, alert-primary, etc.) consulte: Personalización de la plantilla CSS de Bootstrap y ¿Cómo cambiar el color primario de Bootstrap?
Ver también:
https://stackoverflow.com/a/50973207/171456
Cómo arrancar el tema
Puede agregar colores personalizados o redefinir los colores cambiándolos a través de variables en archivos sass (Bootstrap 4).
$theme-colors: (
primary: red,
);
@import "~bootstrap/scss/bootstrap";
Si usa las mismas claves para sus colores, redefinirá Bootstrap. De lo contrario, con nuevas claves creas nuevas clases.
Este conjunto de ejemplos color primario de azul a rojo.
Prueba este método
Agrega un clase al button
, Aquí btn personalizado y escriba el CSS para eso en nuestro hoja de estilo.
.btn-primary.custom-btn {
background-color: #000;
border-color: #000;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<button type="button" class="btn btn-primary custom-btn">Custom</button>
<button type="button" class="btn btn-primary">Default</button>
</div>