How to change btn color in Bootstrap

Question

Is there a way to change all  btn properties in Bootstrap  I have tried below ones  but still sometimes it shows the default blue color  say after clicking and removing the mouse etc   How can I change the entire theme altogether    btn-primary   btn-primary hover   btn-primary active   btn-primary visited       background-color   8064A2

User · Answer

I had run into the similar problem recently, and managed to fix it with adding classes

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

Also pay attention to [disabled] and [disabled]:hover, if this class is used on input[type=submit]. Like this:

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

User · Answer

2019 Update for Bootstrap 4 Now that Bootstrap 4 uses SASS  you can easily change the primary button color using the button-variant mixins   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   codeply com go 2bHYxYSC0n  SASS demo  This SASS compiles into the following 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 gt  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 gt  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 gt  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 gt  btn-outline-primary dropdown-toggle focus       box-shadow  0 0 0  2rem rgba 119  204  204  0 5     https   codeply com go lD3tUE01lo  CSS demo    To change the primary color for all classes see  Customizing Bootstrap CSS template and How to change the bootstrap primary color

User · Answer

I think using  important is not a very wise option  It may cause for many other issues specially when making the site responsive  So  my understanding is that  the best way to do this to use custom button CSS class with  btn bootstrap class   btn is the base style class for bootstrap button  So  keep that as the layout  we can change other styles using our custom css class   One more extra thing I want to mention here  Some people are trying to remove blue outline from the buttons  It s not a good idea because that accessibility issue when using keyboard  Change it s color using outline-color  instead

User · Answer

The simplest way is to   intercept every button state  add  important to override the states        btn-primary hover       btn-primary active       btn-primary visited       btn-primary focus         background-color  black  important        border-color  black  important          OR the more practical UI way is to make the hover state of the button darker than the original state  Just use the CSS snippet below   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

User · Answer

Just create your own button on    http   blog koalite com bbg  add the CSS at the end off your boottrap min css   Cheers

User · Answer

The easiest way to see which properties you need to override is to take a look at Bootstrap s source code  specifically the  button-variant mixin defined in mixins buttons less  You still need to override quite a lot of properties to get rid of all of the  btn-primary styling  e g   focus  disabled  usage in dropdowns etc    A better way might be to    Create your own customized version of Bootstrap using Bootstrap s online customization tool Manually create your own color class  e g   btn-whatever Use a LESS compiler and use the  button-variant mixin to create your own color class  e g   btn-whatever

User · Answer

I guess you forgot  btn-primary focus property and comma after  btn-primaryYou also can use less and redefine some colors in variables less fileWith this in mind your code will be look like this    x000D   x000D   btn-primary  x000D   btn-primary hover  x000D   btn-primary active  x000D   btn-primary visited  x000D   btn-primary focus   x000D      background-color   8064A2  x000D      border-color   8064A2  x000D    x000D   x000D   x000D

User · Answer

I am not the OP of this answer but it helped me so  I wanted to change the color of the next previous buttons of the bootstrap carousel on my homepage  Solution  Copy the selector names from bootstrap css and move them to your own style css   with your own prefrences       x000D   x000D   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    gt      font-size  55px    color  red      carousel-control-prev-icon after     content    lt      font-size  55px    color  red    x000D   x000D   x000D

User · Answer

You can add custom colors using bootstrap theming in your config file for example variables scss and make sure you import that file before bootstrap when compiling   theme-colors         quot whatever quot    900     Now you can do  btn-whatever

User · Answer

Here s my flavor without the loss of hover  I personally like it better than the standard bootstrap transitioning    x000D   x000D   btn-primary  x000D   btn-primary active  x000D   btn-primary visited   x000D    background-color   8064A2  important  x000D    x000D   x000D   btn-primary hover   x000D    background-color   594671  important  x000D    transition  all 1s ease  x000D    -webkit-transition  all 1s ease  x000D    -moz-transition  all 1s ease  x000D    -o-transition  all 1s ease  x000D    -ms-transition  all 1s ease  x000D    x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 4 1 css bootstrap min css  rel  stylesheet    gt  x000D   lt button class  btn btn-primary  gt Hover me  lt  button gt  x000D   x000D   x000D

User · Answer

Adding a step-by-step guide to  Codeply-er s answer above for SASS SCSS newbies like me     Save 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        Download a SASS compiler such as Koala so that SCSS file above can be compiled to CSS  Clone the Bootstrap github repo because the compiler needs the button-variant mixins somewhere  Explicitly import bootstrap functions by creating a  bootstrap scss file as below  This will allow the compiler to access the Bootstrap functions and variables     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      Compile btnCustom scss with the previously downloaded compiler to css

User · Answer

If you want to override any default properties in bootstrap you have to make the properties as important    btn-primary   btn-primary hover   btn-primary active   btn-primary visited       background-color   8064A2  important      i hope this will works for you

User · Answer

You have missed one style   btn-primary active focus  which causes that still during btn click default bootstrap color show up for a second  This works in my code    btn-primary   btn-primary hover   btn-primary active   btn-primary visited   btn-primary focus   btn-primary active focus   background-color   8064A2

User · Answer

Remove the button color class like  btn-success  and put a custom class like  btn-custom  and write css for that class  That simply works for me   HTML     lt button class  btn btn-block login   type  submit  gt Sign In lt  button gt   CSS     login        background-color   0057fc      color  white

[css] How to change btn color in Bootstrap

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3