Bootstrap Button Styles

5 Easy Ways to Modify Your Bootstrap Button Styles

In the following tutorial, we’re going to show you 5 easy ways to modify your Bootstrap button styles. This is a quick and easy way to differentiate your site from the default Bootstrap look. 

If you like what you see, you can download our free Bootstrap button pack (Demo | Download).

Initial Setup

We modified the default Bootstrap .btn class with the following CSS styles. These styles are only required if you’re looking to achieve the same look and feel as our button pack. Otherwise, you can stick with the default Bootstrap styles for now.

Now that we’ve modified our .btn class, let’s go over our custom button classes.

Sharp Buttons

To create sharp buttons, simply set your border radius to 0.

See the Pen YPKbxW by BootstrapBay (@bootstrapbay) on CodePen.

Outline Buttons

The first step in creating an outline button is to remove the background. Since we’ll be increasing the border width, you also need to reduce the button padding. Otherwise, your button will appear oversized.

Next, you need to increase the thickness of the border and change the color to match the border.

Finally, you can add some hover effects by modifying the color and border colors when hovering over the button.

See the Pen PwYvaO by BootstrapBay (@bootstrapbay) on CodePen.

Gradient Buttons

With gradient buttons, you’ll need a starting and ending color. While a typical linear gradient starts with one color and fades to another, this example has a hard shift in color halfway through the button. You’ll notice all the different lines we’ve added and that’s simply for compatibility across older browsers.

Next, we lighten the buttons when hovering over them.

Finally, we darken the buttons when they’re active/clicked.

See the Pen PwYrQX by BootstrapBay (@bootstrapbay) on CodePen.

Rounded Buttons

To get the rounded look, simply increase the pixel size on the border radius.

See the Pen MYgMBy by BootstrapBay (@bootstrapbay) on CodePen.

Raised Buttons

First, you need to create a box shadow to give the effect that the button is raised.

Then, you need to remove the box shadow and modify the margins when the button is activated.

See the Pen ogvrME by BootstrapBay (@bootstrapbay) on CodePen.

Download The Button Pack

I hope you found this tutorial helpful. If you liked these button styles, make sure to download the button pack.

Christopher Gimmer

Christopher is an entrepreneur & the co-founder of BootstrapBay. He helps web designers, developers and entrepreneurs utilize the power of Bootstrap. Connect with him on Twitter.