In a previous tutorial, I showed you how-to create outline buttons using Bootstrap. In this tutorial, I’m going to you how-to create an like-effect, but make the button border gradient, instead of a solid colour.Here is an example of what we are trying to achieve:

Button Name

HTML

To add the gradient border button to you website, use the following HTML code:

<a href="" title="" class="btn btn-gradient-border">Button</a>

Since, the button is for the Bootstrap front-end framework, we can use Bootstrap’s sizing classes.

Extra small:

<a href="" title="" class="btn btn-gradient-border btn-xs">Button</a>

Small:

<a href="" title="" class="btn btn-gradient-border btn-sm">Button</a>

Large:

<a href="" title="" class="btn btn-gradient-border btn-lg">Button</a>

CSS

The following is the CSS that you should add to your Bootstrap CSS file or other included CSS file.

.btn-gradient-border {
    color: #000;
    border: 10px solid transparent;
    border-image: linear-gradient(45deg, #e50670, #02adea);
    border-image-slice: 1;
    background: transparent;
}

For the button hover, we are going to switch the colours (you don’t have to switch the colours, you can keep them the same or use any other colours):

.btn-gradient-border:hover {
    color: #000;
    border: 10px solid transparent;
    border-image: linear-gradient(45deg, #02adea, #e50670);
    border-image-slice: 1;
}

Remember, you can adjust the border width to the size you want and change the colours for the border image and background.

For the font colour, you can change it from #000 to transparent, if you want the text colour to match the gradient.

Congratulations you’ve added a gradient border button!

.btn-gradient-border {
    color: #000;
    border: 10px solid transparent;
    border-image: linear-gradient(45deg, #e50670, #02adea);
    border-image-slice: 1;
    background: transparent;
}
.btn-gradient-border:hover {
    color: #000;
    border: 10px solid transparent;
    border-image: linear-gradient(45deg, #02adea, #e50670);
    border-image-slice: 1;
}