Puedo cambiar el botón primario del color al cambiar el tema de color en bootstrap v4. Pero afecta a todos los otros componentes.
Cómo configurar el botón primario del color sin afectar el color del tema?
No quiero establecer la marca principal y lograrlo.Otras alternativas?

InformationsquelleAutor Janier | 2018-03-08

7 Comentarios

  1. 33

    2019 Actualización para el Bootstrap 4.1+

    Ahora que Bootstrap 4 utiliza SASS, usted puede fácilmente cambiar sólo el color de los botones el uso de la button-variant mixins. Puesto que usted sólo desea cambiar el botón primario del color, y no todo el tema de la primaria de color, usted necesita usar el button-variant mixins en SASS. Usted puede establecer lo $mynewcolor y/o lighten() y darken() porcentajes quieras.

    $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 (SASS demo)

    Este SASS 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 (CSS demo)


    Para cambiar el color primario para todos contextuales clases (bg-primaria, alerta-primaria, etc..) ver: Personalización de Bootstrap CSS de la plantilla y Cómo cambiar la secuencia de arranque de los colores primarios?

    Véase también:

    https://stackoverflow.com/a/50973207/171456

    Cómo el tema de bootstrap

    • Esto debe ser aceptado respuesta, que cubre todos los estados del botón.
    • Tener en cuenta que uno no puede tener un color de fuente independiente de que el color de fondo, que es decepcionante.
    • usted significa que usted no puede usar el botón variante en el mixin?
    • Sí, lo siento, no estaba clara. El color de la fuente se calcula a partir del color de fondo.
    • Los argumentos son button-variant(background, border-color, hover:background-color, hover:background-color, active:background-color, active:background-color)
  2. 9

    Probar este método

    Agregar un clase a la button , Aquí personalizado-btn y escribir el css para que en nuestro hoja de estilos.

    CSS:

    .btn-primary.custom-btn {
    background-color: #000;
    border-color: #000;
    }

    HTML:

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

    • Por favor, utilice el Bootstrap 4 estable versión en sus respuestas. Alfa es ya muy viejo.
    • Esto no cubre el hover y active los estados.
  3. 6

    Usted puede agregar color personalizado o redefinir los colores por cambio a ellos a través de las variables en los archivos sass (Bootstrap 4).

    $theme-colors: (
    primary: red,
    );
    @import "~bootstrap/scss/bootstrap";

    Si utiliza la misma clave para los colores, que va a redefinir Bootstrap. De lo contrario, con las nuevas llaves crear nuevas clases.

    Este ejemplo primaria de color de azul a rojo.

    • para laravel 5.7, el cambio de color del tema en _variables.secs.
  4. 5

    Como por bootstrap documentación

    Muchos de Bootstrap componentes están construidos con una base modificador de clase
    enfoque. Esto significa que la mayor parte de que el estilo es contenida en una base de
    clase (por ejemplo, .btn), mientras que el estilo de las variaciones están confinados a un modificador de
    clases (por ejemplo, .btn-peligro). Estos modificador de clases se construyen a partir de la
    $theme-colores de mapa para hacer de personalizar el número y el nombre de nuestro
    modificador de clases.

    Así que Si usted cambia de color del tema, a continuación, va a afectar a todos.

    Tal vez debería añadir color en $theme-colores variable si quieres usar ese color en otros sitios.

  5. 2

    He tenido un problema similar: yo quería hacer que el botón que coincida con su contenedor de colores.

    Así que he creado un botón de la clase que se adapta automáticamente a su padre del color en la página de carga. Estoy bastante contento con el resultado (De hecho estoy creando incluso un pequeño plugin). JSfiddle aquí

    JS:

    /*
    ** Author: Jean-Marc Zimmer
    ** Licence: MIT
    */
    $(function() {
    const hexDigits = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];
    function hex(x) {
    return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
    }
    function hexify(rgb) {
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
    }
    function darken(rgb) {
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    return "rgb(" + parseInt(0.9 * rgb[1]) + ',' + parseInt(0.88 * rgb[2]) + ',' + parseInt(0.87 * rgb[3]) + ')';
    }
    function getParentBackground($elem) {
    var color = $elem.css("background-color");
    if (color && color !== 'rgba(0, 0, 0, 0)')
    return color;
    return ($elem.is('body') ? false : getParentBackground($elem.parent()));
    }
    function getParentColor($elem) {
    var color = $elem.css("color");
    if (color && color !== 'rgba(0, 0, 0, 0)')
    return color;
    return ($elem.is('body') ? false : getParentColor($elem.parent()));
    }
    $('.btn-negative, .btn-outline-negative').each(function() {
    var bgColor = hexify(getParentBackground($(this).parent()));
    var color = hexify(getParentColor($(this).parent()));
    var rgb = getParentColor($(this).parent());
    this.style.setProperty('--btn-negative-color0', bgColor);
    this.style.setProperty('--btn-negative-color1', color);
    this.style.setProperty('--btn-negative-shadow-color', color + "88");
    this.style.setProperty('--btn-negative-color2', hexify(darken(rgb)));
    this.style.setProperty('--btn-negative-color3', hexify(darken(darken(rgb))));
    });
    });

    CSS:

    /*
    ** Author: Jean-Marc Zimmer
    ** Licence: MIT
    */
    .btn-negative::before,
    .btn-outline-negative::before {
    --btn-negative-color0: #fff;
    --btn-negative-color1: #000;
    --btn-negative-color2: #000;
    --btn-negative-color3: #000;
    --btn-negative-shadow-color: #0008;
    }
    .btn-outline-negative {
    background-color: var(--btn-negative-color0);
    border: solid 1px var(--btn-negative-color1);
    color: var(--btn-negative-color1);
    }
    .btn-negative,
    .btn-outline-negative.active,
    .btn-outline-negative:hover:not(.disabled):not([disabled]),
    .btn-outline-negative:active:not(.disabled):not([disabled]) {
    background-color: var(--btn-negative-color1);
    color: var(--btn-negative-color0);
    }
    .btn-negative.active,
    .btn-negative:hover:not(.disabled):not([disabled]),
    .btn-negative:active:not(.disabled):not([disabled]) {
    background-color: var(--btn-negative-color2);
    color: var(--btn-negative-color1);
    }
    .btn-negative.active:hover,
    .btn-negative:hover:active:not(.disabled):not([disabled]) {
    background-color: var(--btn-negative-color3);
    color: var(--btn-negative-color1);
    }
    .btn-negative:focus,
    .btn-outline-negative:focus {
    box-shadow: 0 0 0 .2rem var(--btn-negative-shadow-color);
    }

    HTML:

    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" type="text/javascript"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" type="text/javascript"></script>
    <div class="container">
    <div class="alert alert-success">
    <p>Some text...</p>
    <button class="btn btn-success">btn-success</button>
    <button class="btn btn-negative">btn-negative</button>
    <button class="btn btn-outline-success">btn-outline-success</button>
    <button class="btn btn-outline-negative">btn-outline-negative</button>
    </div>
    </div>

    Debido a la CSS llamada orden en el fragmento, el estilo no se aplica correctamente.

    Alguna idea para mejorarlo es bienvenida !

  6. 1

    Usted tiene que crear un custom css hoja y reemplazar el estilo de botón o agregar el botón de una nueva clase y reemplazar algunas de las propiedades.

    <button class="btn-primary">Button</button>
    .btn-primary{
    background-color:black;
    }
    <button class="btn-primary custom-btn-class">Button</button>
    .custom-btn-class{
    background-color:black;
    }
    • Estoy buscando bootstrap 4 soluciones
    • Entonces, ¿cómo es esto un BS 4 solución?
  7. -2
    <a  class="btn btn-secondary" href="#">Find out more</a>
    .featured  .btn-secondary {
    font-weight: bold;
    background-color: blue;
    }

    Acaba de editar en css funciona para mí

    • Esto no cubre todos los estados de botón.. hover, active, el enfoque, etc…

Dejar respuesta

Please enter your comment!
Please enter your name here