Twitter’s Bootstrap 3 also delivers 6 button colors. Define your own button colors will a lot simpler as in Twitter’s Bootstrap 2. Cause TB3 drops support for IE7 the button css becomes more straight forward. Every button color still got 3 variants (default, active and disable). For the active state an background and border color are calculated based on the base color. The disable state use the base color and only adds a css-opacity.
TB3 not only drops IE7 support. Twitter’s Bootstrap 3 buttons don’t have a gradient. Also the text-shadow is removed.
I create a new Twitter Bootstrap Button Generator. Use this generator for Twitter’s Boostrap 3.x. Input a html color gives you the css code for your buttons. Add the css in your html after the Bootstrap’s CSS inclusion.
You got 2 choses of buttons. The default simple css and the more complex ‘old style’ css with added gradient. This new generator use Lessphp to generate the css code. Lessphp is a compiler for LESS written in PHP. See also: Twitter bootstrap buttons
Da Moose
Awesome job maaaan! I like Bootstrap 3, but it’s button sux … your generator is exactly what I was looking for … thx again mate …
admin
Thank you. Also try: http://twitterbootstrap3navbars.w3masters.nl/ this tool generate CSS code for your custom Navbar.
Paulo
Very handy thanks. Quick question – I have a site where I want users to be able to customize the appearance of buttons by selecting a single color and then generating the other button states automatically (just the flat style) and adding the generated css to the page. As you are doing the same calculation via your http://twitterbootstrap3buttons.w3masters.nl/ site, was wondering how you went about this? Are you using the .less stuff on post back or is the calculation something that I can implement in code?
admin
Hi Paolo, thanks for your question. On the Twitter Bootstrap Button generator i use Less files for the buttons. I compile the less server side with LessPHP (http://leafo.net/lessphp/). The compiled CSS will be return on the next page load after submitting the form. So the basic are very easy.
For the implementation of http://twitterbootstrap3navbars.w3masters.nl/ if found LessPHP didn’t implement all command / syntax rules i need. For this generator i use lessc 1.3.3 (LESS Compiler) [JavaScript] installed on the web server. In this case i return the compiled css from command line like:
cat | /usr/local/bin/lessc - < < EOF {less code}EOFpushpa
Hi, How to use images in bootstrp buttons. Is it possible. Please advise.
Mark
I realise you made this a while ago and most people have probably moved on to Bootstrap 4 by now, but if you wanted to improve on it you could provide a means for people to enter their own custom names, so that if someone used your tool to make several buttons of different colours they would not have to edit the ‘-custom’ part each time. Anyway, thank you very much, it’s very useful to me.