Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Styling Twitter's Bootstrap 3.x Buttons

Twitter's Bootstrap 3 buttons are limited in colors. By default there will be 5 7 colors (default primary, error, warning, info, success and link) See:

enter image description here

Twitter's Bootstrap Buttons

Every button got 3 state (default, active and disabled)

How to add more colors or create custom buttons? This question is already answered for Twitter's Bootstrap 2.x: Styling twitter bootstrap buttons. Bootstrap 3 is not backwards compatible. There will be lot of changes in the less and css files. Support for IE7 will be dropped. TB3 is mobile first. Markup codes will be changed too.

like image 614
Bass Jobsen Avatar asked Jun 15 '13 23:06

Bass Jobsen


People also ask

How do I change the color of buttons in Twitter Bootstrap?

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.

What is Twitter Bootstrap?

Objective. Twitter Bootstrap is a front end framework to develop web apps and sites fast. In modern web development, there are several components which are required in almost all web projects. Bootstrap provides you with all those basic modules - Grid, Typography, Tables, Forms, Buttons, and Responsiveness.

What is Bootstrap 3 responsive CSS?

The default CSS of Bootstrap 3 itself contains responsive features. Bootstrap 3 is created in such a way, the design targets the mobile devices first and then comes their desktop counterparts. This is indeed a very timely shift since more and more users are using mobile devices.

Is it possible to use Twitter Bootstrap 3 with HTML5 DOCTYPE?

Twitter Bootstrap 3 uses several HTML5 elements and CSS properties. And for those to be working properly, you need to use HTML5 Doctype. If you don't use HTML5 Doctype, at the beginning of your web page created with Twitter Bootstrap, you may face inconsistencies in some of the browsers.


1 Answers

Add extra colors to your less files and recompile. Also see Twitter Bootstrap Customization Best Practices. update

As mentioned by @ow3n since v3.0.3 use:

.btn-custom {   .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border); } 

Note in the above @btn-default-color sets the font color,@btn-default-bg the background color and @btn-default-border the color of the border. Colors for states like active, hover and disabled are calculated based on of these parameters.

For example:

.btn-custom {   .button-variant(blue; red; green); } 

will result in:

enter image description here

For who want to use the CSS direct, replace the colors in this code:

.btn-custom {   color: #0000ff;   background-color: #ff0000;   border-color: #008000; } .btn-custom:hover, .btn-custom:focus, .btn-custom:active, .btn-custom.active, .open .dropdown-toggle.btn-custom {   color: #0000ff;   background-color: #d60000;   border-color: #004300; } .btn-custom:active, .btn-custom.active, .open .dropdown-toggle.btn-custom {   background-image: none; } .btn-custom.disabled, .btn-custom[disabled], fieldset[disabled] .btn-custom, .btn-custom.disabled:hover, .btn-custom[disabled]:hover, fieldset[disabled] .btn-custom:hover, .btn-custom.disabled:focus, .btn-custom[disabled]:focus, fieldset[disabled] .btn-custom:focus, .btn-custom.disabled:active, .btn-custom[disabled]:active, fieldset[disabled] .btn-custom:active, .btn-custom.disabled.active, .btn-custom[disabled].active, fieldset[disabled] .btn-custom.active {   background-color: #ff0000;   border-color: #008000; } .btn-custom .badge {   color: #ff0000;   background-color: #0000ff; } 

end update

To generate a custom button:

.btn-custom {     .btn-pseudo-states(@yourColor, @yourColorDarker);  } 

The above will generate the following css:

.btn-custom {   background-color: #1dcc00;   border-color: #1dcc00; } .btn-custom:hover, .btn-custom:focus, .btn-custom:active, .btn-custom.active {   background-color: #19b300;   border-color: #169900; } .btn-custom.disabled:hover, .btn-custom.disabled:focus, .btn-custom.disabled:active, .btn-custom.disabled.active, .btn-custom[disabled]:hover, .btn-custom[disabled]:focus, .btn-custom[disabled]:active, .btn-custom[disabled].active, fieldset[disabled] .btn-custom:hover, fieldset[disabled] .btn-custom:focus, fieldset[disabled] .btn-custom:active, fieldset[disabled] .btn-custom.active {   background-color: #1dcc00;   border-color: #1dcc00; } 

In the above #1dcc00 will be your custom color and #19b300 your darker color. In stead of the less solution you also can add this css direct to your html files (after the bootstrap css).

Or get your css code direct from Twitter's Bootstrap 3 Button Generator

like image 122
Bass Jobsen Avatar answered Sep 18 '22 23:09

Bass Jobsen