Bootstrap Snippet: Easy to Add Buttons

Included with Bootstrap is the ability to add attractive and prestyled buttons.

How to Add a Button to your Pages

  1. Copy the button code of your choice.
  2. Edit the URL link
  3. Customize the 'Change Me' text. This is what is written on the button. 

As an example. let's add a button that says 'Order Now' that links to the home page of MemberGate, the code to add would look like this:

<a class="btn btn-primary" href="https://www.membergate.com" role="button">Order Now</a>

Order Now

Button Options

Blue Solid

To add this button, copy the code below and update the URL link and CHANGE ME text.

<a class="btn btn-primary" href="URL" role="button">CHANGE ME</a>

Blue Outline

To add this button, copy the code below and update the URL link and CHANGE ME text.

<a class="btn btn-outline-primary" href="URL" role="button">CHANGE ME</a>

Grey Solid

To add this button, copy the code below and update the URL link and CHANGE ME text.

<a class="btn btn-secondary" href="URL" role="button">CHANGE ME</a>

Grey Outline

To add this button, copy the code below and update the URL link and CHANGE ME text.

<a class="btn btn-outline-secondary" href="URL" role="button">CHANGE ME</a>

Green Solid

To add this button, copy the code below and update the URL link and CHANGE ME text.

<a class="btn btn-success" href="URL" role="button">CHANGE ME</a>

Green Outline

To add this button, copy the code below and update the URL link and CHANGE ME text.

<a class="btn btn-outline-success" href="URL" role="button">CHANGE ME</a>

Red Solid

To add this button, copy the code below and update the URL link and CHANGE ME text.

<a class="btn btn-danger" href="URL" role="button">CHANGE ME</a>

Red Outline

To add this button, copy the code below and update the URL link and CHANGE ME text.

<a class="btn btn-outline-danger" href="URL" role="button">CHANGE ME</a>

Yellow Solid

To add this button, copy the code below and update the URL link and CHANGE ME text.

<a class="btn btn-warning" href="URL" role="button">CHANGE ME</a>

Yellow Outline

To add this button, copy the code below and update the URL link and CHANGE ME text.

<a class="btn btn-outline-warning" href="URL" role="button">CHANGE ME</a>

Cyan Solid

To add this button, copy the code below and update the URL link and CHANGE ME text.

<a class="btn btn-info" href="URL" role="button">CHANGE ME</a>

Cyan Outline

To add this button, copy the code below and update the URL link and CHANGE ME text.

<a class="btn btn-outline-info" href="URL" role="button">CHANGE ME</a>

Light Solid

To add this button, copy the code below and update the URL link and CHANGE ME text.

<a class="btn btn-light" href="URL" role="button">CHANGE ME</a>

Light Outline

To add this button, copy the code below and update the URL link and CHANGE ME text.

<a class="btn btn-outline-light" href="URL" role="button">CHANGE ME</a>

Dark Solid

To add this button, copy the code below and update the URL link and CHANGE ME text.

<a class="btn btn-dark" href="URL" role="button">CHANGE ME</a>

Dark Outline

To add this button, copy the code below and update the URL link and CHANGE ME text.

<a class="btn btn-outline-dark" href="URL" role="button">CHANGE ME</a>