Gradient Button Borders

Designs for some sites request complex things like gradients on button borders. This is something that is possible, but does require a workaround and has some caveats. The background of the button can be whatever you want, though, including translucent with RGBA or completely transparent.

Caveats

Borders with gradients cannot have rounded corners, due to the way we have to set them up.

Gradients should be simple, limited to 2 colors. We may be able to do more, but it would likely just make the area look very crowded and messy so we advise against it.

How To

This is a pure-CSS method, so you should just be able to copy in the mixin and use it right off the bat on BS3 and BS4 sites.

scss > custom > mixins.scss

Add this to the bottom of the file.

@mixin border-gradient-vertical($border-width: 1px, $start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
  border-width: $border-width;
  border-style: solid;
  -moz-border-image: -moz-linear-gradient(top, $start-color $start-percent, $end-color $end-percent);
  -webkit-border-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent);
  border-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
  border-image-slice: 1;
}

@mixin border-gradient-horizontal($border-width: 1px, $start-color: #333, $end-color: #555, $start-percent: 0%, $end-percent: 100%) {
  border-width: $border-width;
  border-style: solid;
  -moz-border-image: -moz-linear-gradient(right, $start-color $start-percent, $end-color $end-percent);
  -webkit-border-image: -webkit-linear-gradient(right, $start-color $start-percent, $end-color $end-percent);
  border-image: linear-gradient(to left, $start-color $start-percent, $end-color $end-percent);
  border-image-slice: 1;
}

@mixin border-gradient-degree($degree, $border-width: 1px, $start-color: #333, $end-color: #555, $start-percent: 0%, $end-percent: 100%) {
  border-width: $border-width;
  border-style: solid;
  -moz-border-image: -moz-linear-gradient($degree, $start-color $start-percent, $end-color $end-percent);
  -webkit-border-image: -webkit-linear-gradient($degree, $start-color $start-percent, $end-color $end-percent);
  border-image: linear-gradient($degree, $start-color $start-percent, $end-color $end-percent);
  border-image-slice: 1;
}

To Use

For any of these, your mixin should not have any other type of border styling, because that will override the gradient setup.

The mixins can be used as follows:

Vertical (top-to-bottom) Gradient

As written here, 1px is the width of the border–you can change this to be whatever you need. $topColor is the color that will appear on the top of the border. $bottomColor is the color that will appear on the bottom of the border. The two percentages at the end are optional stop points, and can be removed if needed. As written, it defines that the gradient should start at the farthest top point and end at the farthest bottom point.

button.btn-class {
	@include border-gradient-vertical(1px, $topColor, $bottomColor, 0%, 100%);
}

Horizontal (left-to-right) Gradient

As written here, 1px is the width of the border–you can change this to be whatever you need. $leftColor is the color that will appear on the left of the border. $rightColor is the color that will appear on the right of the border. The two percentages at the end are optional stop points, and can be removed if needed. As written, it defines that the gradient should start at the farthest left point and end at the farthest right point.

button.btn-class {
	@include border-gradient-vertical(1px, $leftColor, $rightColor, 0%, 100%);
}

Angled Gradient

As written here, 45deg is the angle of the gradient in degrees–you can change this to be whatever you need. As written here, 1px is the width of the border–you can change this to be whatever you need. $startColor is the color that will appear at the start of the gradient. $endColor is the color that will appear at the end of the gradient. The two percentages at the end are optional stop points, and can be removed if needed. As written, it defines that the gradient should start at the farthest left point and end at the farthest right point.

button.btn-class {
	@include border-gradient-degree(45deg, 1px, $startColor, $endColor, 0%, 100%);
}

Example Sites

• Bank of Hope (no longer with us, but UAT is still up - they use various border gradients)
• Credit Union of Texas (Danger button uses blue/white angled gradient)

Tags: bs3, bs4, mixins, buttons, gradient