Styling twitter bootstrap buttons

Question

Twitter-Bootstrap buttons are awesomely beautiful  Try them out by scrolling over them    But they are limited in colors    Is there any way I could change the base color of the button while keeping the beautiful hover-over effect that bootstrap has made so beautiful and effortless   I am completely unaware of what the css javascript looks like that twitter uses to maintain those effects

User · Answer

In order to completely override the bootstrap button styles, you need to override a list of properties. See the below example.

    .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, 
    .btn-primary:active, .btn-primary.active, .btn-primary:visited,
    .btn-primary:active:hover, .btn-primary.active:hover{
        background-color: #F19425;
        color:#fff;
        border: none;
        outline: none;
    }

If you don't use all the listed styles then you will see the default styles at performing actions on button. For example once you click the button and remove mouse pointer from button, you will see the default color visible. Or keep the button pressed you will see default colors. So, I have listed all the pseudo-styles that are to be overridden.

User · Answer

For Bootstrap for Sass override it s   btn-default         include button-variant  color   background   border        You can see the source for it here  https   github com twbs bootstrap-sass blob a5f5954268779ce0faf7607b3c35191a8d0fdfe6 assets stylesheets bootstrap mixins  buttons scss L6

User · Answer

Instead of changing CSS values one by one I would suggest to use LESS  Bootstrap has LESS version on Github  https   github com twbs bootstrap  LESS allows you to define variables to change colors which makes it so much more convenient  Define color once and LESS compiles CSS file that changes the values globally  Saves time and effort

User · Answer

I know this is an older thread  but just to add another perspective  I d assert that using overrides is really a bit of a code smell and will quickly get out of hand on larger projects  Today you re overriding Buttons  tomorrow Modals  the next day it Dropdowns  etc   etc   I d advise to try possibly commenting out the include for buttons less and either define my own  or  find another Buttons library that s more suitable to my project  Shameless plug  here s an example of how easy it is to mix our Buttons library with TB  Using Buttons with Twitter Bootstrap  In practice  again  you d likely want to remove the buttons less include altogether to improve performance but this shows how you can make things look a bit less  generic   I haven t done this exercise yet myself but I d imagine you could start by simply commenting out lines like   https   github com twbs bootstrap blob master less bootstrap less L17  And then recompiling using  lessc using one of your own buttons modules  That way you get the battle tested core of TB but can still customize things without resorting to major overrides  There s absolutely no reason not to use only parts of a library like Bootstrap  Of course the same applies to the Sass version of TB

User · Answer

Basically  the buttons in Twitter Bootstrap are controlled in CSS by   btn     What you have to do is go to the CSS file and find where it says  btn  and change the color settings  However  it s not as simple as just doing that since you also have to change what color the button changes into when you highlight it  etc  To do THAT  you have to look for other tags in CSS like   btn hover     etc   Changing it requires changing of the CSS  Here is a quick link to that file   https   github com twbs bootstrap blob master dist css bootstrap css

User · Answer

Here is a very easy and eficient  way   add in your CSS your class with the colors you want to apply to your button    my-btn      background   0099cc      color   ffffff     my-btn hover      border-color   C0C0C0     background-color   C0C0C0       and add the style to your bootstrap button or link    lt a href  xxx  class  btn btn-info my-btn  gt aaa lt  a gt

User · Answer

For Bootstrap  at least for version 3 1 1  and LESS  you can use this    btn-my-custom        button-variant  color   background   border      This is defined in bootstrap less buttons less

User · Answer

If you are already loading your own custom CSS file after loading bootstrap css  version 3  you can add these 2 CSS styles to your custom css and they will override the bootstrap defaults for the default button style    btn-primary hover   btn-primary focus   btn-primary active   btn-primary active   open  dropdown-toggle btn-primary      background-color   A6A8C1    border-color   31347B       btn     background-color   9F418F    border-color   9F418F

User · Answer

Here is a good resource  http   charliepark org bootstrap buttons   You can change color and see the effect in action

User · Answer

You can change  background-color and use  important    x000D   x000D   btn-primary   x000D    background-color   003c79  important  x000D    border-color   15548b  important  x000D    color   fff  x000D    x000D   x000D   btn-primary hover   x000D    background-color   4289c6  important  x000D    border-color   3877ae  important  x000D    color   fff  x000D    x000D   x000D   btn-primary focus   btn-primary focus   x000D     background-color   4289c6  important  x000D     border-color   3877ae  important  x000D     color   fff  x000D    x000D   x000D   x000D

User · Answer

In Twitter Bootstrap bootstrap 3 0 0   Twitter button is flat   You can customize it from http   getbootstrap com customize  Button color  border radious etc    Also you can find the HTML code and others functionality  http   twitterbootstrap org bootstrap-css-buttons   Bootstrap 2 3 2 button is gradient but 3 0 0   new release   flat and looks more cool     and also you can find to customize the entire bootstrap looks and style form this resources   http   twitterbootstrap org top-5-customizing-bootstrap-resources

User · Answer

I found the simplest way is to put this in your overrides   Sorry for my unimaginative color choice  Bootstrap 4-Alpha SASS   my-btn        include button-variant  btn-primary-color   btn-primary-bg   btn-primary-border      include button-variant red  white  blue       Bootstrap 4 Alpha SASS Example  Bootstrap 3 LESS   my-btn        button-variant  btn-primary-color   btn-primary-bg   btn-primary-border      button-variant red  white  blue       Bootstrap 3 LESS Example  Bootstrap 3 SASS   my-btn        include button-variant  btn-primary-color   btn-primary-bg   btn-primary-border      include button-variant red  white  blue       Bootstrap 3 SASS Example  Bootstrap 2 3 LESS   btn-primary        buttonBackground  btnBackground   btnBackgroundHighlight   grayDark  0 1px 1px rgba 255 255 255  75       buttonBackground red  white       Bootstrap 2 3 LESS Example  Bootstrap 2 3 SASS   btn-primary        include buttonBackground  btnPrimaryBackground   btnPrimaryBackgroundHighlight       include buttonBackground red  white        It will take care of the hover actives for you  From the comments  if you want to lighten the button instead of darken when using black  or just want to inverse  you need to extend the class a bit further like so   Bootstrap 3 SASS Ligthen   my-btn         include button-variant  btn-primary-color   btn-primary-bg   btn-primary-border      color   fff     background   000     border   333     include button-variant  color   background   border        override the default darkening with lightening    amp  hover     amp  focus     amp  focus     amp  active     amp  active     open  gt   amp  dropdown-toggle       color   color      background-color  lighten  background  20      10  default     border-color  lighten  border  22       12  default         Bootstrap 3 SASS Lighten Example

User · Answer

Or try http   twitterbootstrapbuttons w3masters nl   It creates css for buttons based on html color input  Add the css after the bootstrap css  It provides three styles of buttons  light  dark and spin

User · Answer

You can overwrite the colors in your css  for example for Danger button    btn-danger   border-color    insert color here   background-color    insert color here     btn-danger hover   border-color    insert color here   background-color    insert color here

[css] Styling twitter bootstrap buttons

Examples related to css

Examples related to button

Examples related to twitter-bootstrap