In this tutorial I’m going to show you how-to create outline buttons using the Twitter Bootstrap front-end framework.


This is an example of what the buttons will look like once we are done (the colours of course can be changed):

Buy Now Buy Now Buy Now Buy Now


The following is the CSS for each button:

.btn-button-name, .btn-button-name:link, .btn-button-name:visited {
    background-color: transparent;
    border-radius: 0;
    color: #6f5499;
    border: 2px solid #6f5499;
.btn-button-name:active, .btn-button-name:hover {
    background-color: #6f5499;
    color: #fff

Remember to change .btn-button-name to whatever you want the name of the button to be. Try to remember to keep the .btn- prefix to match Bootstrap’s naming.

What’s important to notice is that the button has a coloured border and coloured text with a different coloured background. When the button is hovered, the background and border is coloured, and the text is a different colour.

I recommend leaving the background transparent for when the button is not hovered or active, so that it can naturally blend into the background of your website or the website component in which it is placed.

We can also change the border width for the different button sizes. By default, the border width is 2px, which is good for the default button size, but we can change the large size button border width to 3px, and the small and extra small size button border width to 1px using the following CSS:

.btn-button-name.btn-lg {
    border: 3px solid #6f5499;
.btn-button-name.btn-sm {
    border: 1px solid #6f5499;
.btn-button-name.btn-xs {
    border: 1px solid #6f5499;

Remember to change .btn-button-name to whatever you named the button.


<a href="#" title="" class="btn btn-button-name btn-lg">Buy Now</a>

Make sure you change btn-button-name to the button’s CSS class name.

If you are going to have different border widths based on the button size (btn-lg), make sure the button size class is after the button name (btn-button-name).
.btn-button-name,.btn-button-name:link,.btn-button-name:visited{background-color:transparent;border-radius:0;color:#6f5499;border:2px solid #6f5499}.btn-button-name:active,.btn-button-name:hover{background-color:#6f5499;color:#fff}.btn-button-name.btn-lg{border:3px solid #6f5499}.btn-button-name.btn-sm,.btn-button-name.btn-xs{border:1px solid #6f5499}.btn-button-name{margin-right:10px}