What is Outline Button and Why We Use it?

Buttons are generally with hefty background colors that are used in web forms or for the navigation purpose etc.

The outline button style removes all background images or colors from a button and gives it a lighter look.

The outline style buttons can be used for various purposes, for example:

  • Indicating the secondary action complementing the primary action.
  • If you have many buttons then it may help in reducing the “noise”

In this tutorial, I will show you how to create Outline buttons by using custom CSS as well as using the Bootstrap 4 and other frameworks.

You Should Read: Bootstrap 4 Buttons

An example of outline buttons by Bootstrap 4

In Bootstrap 4, the outline button CSS classes are something new than the previous version buttons. All you have to do is giving the main .btn class along with btn-outline-* contextual class for specifying the desired style.

Bootstrap 4 has the following contextual classes for creating the outline style buttons:

  • btn-outline-primary
  • btn-outline-secondary
  • btn-outline-success
  • btn-outline-info
  • btn-outline-light
  • btn-outline-dark
  • btn-outline-danger
  • btn-outline-warning

The demo below shows using all these classes for creating the outline buttons.

outline buttons Bootstrap-4

See online demo and code

The complete code of this demo:

You have to include the reference to the Bootstrap 4 CSS file; as you can see in the above code.

What if I don’t want to include whole Bootstrap CSS file?

So, if your project is not based on Bootstrap but you still want to use those beautifully styled outline buttons?

No problems, you may get the only CSS for outline buttons rather than whole Bootstrap CSS file that contains the style for each component or element.

For that, you have to find and copy/paste the .btn class and required contextual button classes.

The demo below shows the same output as in the above example, however, if you look at the code section under the head tag, it contains CSS code for all outline buttons.

See complete code and demo

You can see the .btn and .btn-outline-primary classes code below while the demo page contains the code of all the buttons:

.btn class code:

.btn-outline-primary CSS code:

The demo of creating outline buttons by custom CSS

Again, if your project is not Bootstrap based then you may want using the custom CSS included in your main CSS file for creating the outline style buttons.

While you may name the classes as you want, for the demo I am using almost similar names for custom classes:

outline buttons custom

See online demo and code

The complete code:

 

You can play with your own color scheme for the outline as well as hover effects.