Create a Bootstrap Button

Twitter’s Bootstrap front-end framework comes with a variety of buttons in different colours: white, blue, green, light blue, orange and red. This is great, however it is missing a bunch of colours that you may want to use or the colours that Bootstrap comes with may not be the exact shade you want. So, let me show you how-to create a Bootstrap button.

Creating the Button CSS

In this example I’ll create a new button class called .btn-purple, which will create a purple coloured button.

.btn-purple {
    color: #fff;
    text-shadow: 0 1px 0 #fff;
    background-color: #a64686;
    background-image: -webkit-gradient(linear, left 0, left 100%, from(#a45b96), to(#a64686));
    background-image: -webkit-linear-gradient(top, #a45b96, 0, #a64686, 100%);
    background-image: -moz-linear-gradient(top, #a45b96 0, #a64686 100%);
    background-image: linear-gradient(to bottom, #a45b96 0, #a64686 100%);
    background-repeat: repeat-x;
    border-color: #6c345f;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffa45b96', endColorstr='#ffa64686', GradientType=0);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075)
}

.btn-purple:active,
.btn-purple.active {
    background-color: #a64686;
    border-color: #111;
    color: #fff
}

.btn-purple:hover {
    color: #fff;
    border-color: #000;
    background: #a64686
}

The HTML

Here is how the HTML would look like:

<a class="btn btn-purple" title="" href="#">Text</a>

Make sure you list both the btn button class and your CSS class btn-purple. You can also add additional classes, such as button size, as the class we created only affects the colouring / styling.

Understanding the CSS

For the example, I created a purple button by creating a class called .btn-purple. You can name the class whatever you want and if you want to override the styling of the default Bootstrap buttons, you should use their CSS class, which you can find here.

I should also point out the if you are creating a new button, I recommend in keeping with the Bootstrap’s button naming: .btn-XXXXX. Where XXXXX is the colour name or a name of your choosing.

Important Sub-Classes

You’ll notice in the example that I have included .btn-purple:active, .btn-purple.active and .btn-purple:hover. These are important, but not really required as the styling will be inherited by the primary .btn-purple class.

What they offer is additional styling for your button. Where .btn-purple:active and .btn-purple.active means the styling or additional styling that will happen when the visitor is on the button URL. .btn-purple:hover is the styling or additional styling when a visitor moves their mouse cursor over the button.