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.

Answer 1

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

Answer 2

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

Answer 3

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/

Answer 4

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

Answer 5

You can change background-color and use !important;

.btn-primary {
  background-color: #003c79 !important;
  border-color: #15548b !important;
  color: #fff;
}

.btn-primary:hover {
  background-color: #4289c6 !important;
  border-color: #3877ae !important;
  color: #fff;
}

.btn-primary.focus, .btn-primary:focus {
   background-color: #4289c6 !important;
   border-color: #3877ae !important;
   color: #fff;
}

Answer 6

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