Matt Lambert

Check out my blog, or sign up to receive articles by email.

Re-skinning Twitter Bootstrap Buttons Using LESS

By admin on March 15th, 2014 in Bootstrap

I often hear people complaining about how all Bootstrap websites look the same. That’s true if you don’t take the time really learn how to harness the power of the framework. Sometimes people just can’t be bothered to put the work in to customize the look and feel. This isn’t always based on laziness though, Bootstrap can be daunting for the new user when it comes to customization. The secret to speeding up theming for Bootstrap is to use LESS. In this tutorial, I’m going to show you how to setup a color palette and then re-skin the Bootstrap buttons.

Setting Up a Color Palette

The first thing we should do is setup a color palette by declaring a bunch of color variables in LESS. For the tutorial I’m going to use the palette from flatuicolors.com. If you’re unfamiliar with LESS, you declare a variable by using the @ symbol in front of a keyword.

@variable: value;

To re-skin all the buttons, we’re going to require 14 colors. I’ll use a lighter shade for the default button state, then a darker colour for the hover state. I’ve saved you some copy-and-paste time by inserting the variables code below.

@off-white: #ecf0f1;
@light-grey: #bdc3c7;
@blue: #3498db;
@blue2: #2980b9;
@purple: #9b59b6;
@purple2: #8e44ad;
@green: #2ecc71;
@green2: #27ae60;
@yellow: #f1c40f;
@yellow2: #f39c12;
@red: #e74c3c;
@red2: #c0392b;
@dark-blue: #2c3e50;
@white: #fff;

Setting Up Some Layout Variables

Let’s declare one more variable to make our code more modular. You might not see the advantage of this at first, but as your stylesheet grows, it’s nice to have these global variables set for keeping your styling consistent and easy to manage.

@padding: 1em;

The default font size in Bootstrap is 14px, so 1em will be equal to 14px. It’s a good idea to use relative measurements so that if you increase that base font size, everything scales up properly.

Setting Up Some Mixins

Now that we’ve declared all our variables, let’s setup a couple LESS mixins to avoid having to use a ton of prefixed CSS3 code. I’ve setup a mixin for round corners and a global transition value.

.round-corners (@radius: 20px) {
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  border-radius: @radius;
}

.transition (@transition: background .3s linear) {
  -moz-transition: @transition;
  -webkit-transition: @transition;
  transition: @transition;
}

For my button set, I’m going to customize the default button to be a pill shape. Therefore, I’ve set the border-radius to a higher value of 20px. I’m also going to add a nice fade in/out transition effect when you hover over the button. I’ve set the transition duration to 0.3 seconds to make it obvious. You might want to drop this to 0.1 seconds in your own code to make the transition a little more snappy.

Editing the Default .btn Class

Now that all our LESS variables and mixins are setup, let’s start editing the core button styles. The key here is to only edit the properties that you want to be different. You should load the Bootstrap CSS file first, then create a theme.css file and load it after the framework file. That way you inherit all the framework CSS. We only want to overwrite the things that we want to change in our theme. This will keep our theme smaller, easier to manage, and easier to code in the first place.

One note, you need to compile your LESS files into pure CSS before you can use them. The alternative is to include less.js in the <head> of your page, which will compile on load of the page. However, I wouldn’t recommend this for the production version of your project.

For my purposes, I’m only going to change 3 properties on the .btn class. That’s much easier than trying to re-code the entire set of button properties in my theme file. Remember, CSS inheritence is your friend! Here’s the code for your theme:

.btn {
  text-transform: uppercase;
  padding: (@padding - 0.5) @padding;
  font-weight: bold;
 
  .round-corners;
  .transition;
}

.btn:hover {
  .transition;
}

I’ve set the text for the buttons to uppercase, bold, and I’ve tweaked the padding on the buttons. Notice, I’m using the @padding variable that I declared in my LESS code. You can also use operations with variables to get different values. This takes much of the pixel guess work out of your stylesheet and relies more on simple logic; eg: make the padding half of the default value.

You’ll also notice the .round-corners and .transition keywords. Inserting these here will render the LESS mixins. When this compiles to CSS it will be replaced by the vendor prefixed version you’ll need to support all browsers. Much quicker to insert CSS3 this way then having to repeatedly type all those vendor prefixes. We also need to add the .transition keyword to the button :hover state so that the fade in/out happens on hover and mouse out.

Changing Up the Button Colors

Now that the common properties for all buttons have been set, I’ll change the colors for each button class that Bootstrap provides. Let’s start with the default button before we move onto the other ones.

.btn-default {
  color: @dark-blue;
  border-color: @light-grey;
}

.btn-default:hover {
  background-color: @light-grey;
  border-color: @light-grey;
}

I’ve changed the text color of the button to dark blue and I’ve set the border color to my light grey. This may be a subtle change but you want to make sure you are using your entire colour palette across your project. You could leave the default Bootstrap border color there, which happens to be another light grey, but you then run the risk of having similar versions of the same color. Might not seem like a big deal to a developer, but this is the kind of thing that drives designers crazy.

On hover, the background-color changes to light grey and the border color stays the same. That’s all you have to edit on the specific button instance. Let’s take a look at the other button classes now.

.btn-primary {
  background-color: @blue;
  border-color: @blue;
}

.btn-primary:hover {
  background-color: @blue2;
  border-color: @blue2;
}

.btn-info {
  background-color: @purple;
  border-color: @purple;
}

.btn-info:hover {
  background-color: @purple2;
  border-color: @purple2;
}

.btn-success {
  background-color: @green;
  border-color: @green;
}

.btn-success:hover {
  background-color: @green2;
  border-color: @green2;
}

.btn-warning {
  background-color: @yellow;
  border-color: @yellow;
}

.btn-warning:hover {
  background-color: @yellow2;
  border-color: @yellow2;
}

.btn-danger {
  background-color: @red;
  border-color: @red;
}

.btn-danger:hover {
  background-color: @red2;
  border-color: @red;
}

There is a default and hover state for each button variation. All I’m tweaking is the background-colour and border-colour for each button class. Notice that I’m using the color variables that we setup above. This is much more readable than a bunch of hex number values. Once you’ve entered this into your theme, you’re done. With a few lines of code and some solid organizing we’ve re-skinned Bootstrap’s buttons. That wasn’t that hard was it? Bootstrap is such a powerful tool if you know how to approach customization in a logical manner.

Check out all the code and a demo at: http://cdpn.io/uHgod

If you enjoyed this tutorial, you should check out the book I’m currently writing on mastering Twitter Bootstrap.

Learn more about Mastering Bootstrap →

Like what you read? Check out my store over at Creative Market to support the blog and help keep the lights on. Files starting from only $2.