How to Add Buttons to Your Pages

MemberGate automatically includes the files to utilize and use bootstrap within your site. Bootstrap is framework that includes already built designs to help you to layout and design your pages.

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

Each button is set up using a similar technique.

<a class="btn btn-primary" href="#" role="button">Link</a>

There are only three parts to edit to customize the button.

1) btn-primary = the button color/type; referred in the table below in the "class" column

How to Add Buttons to Your Pages

2) href="#" = substitute the url for the button link for the #. This is the web page the user will visit upon clicking on the button

How to Add Buttons to Your Pages

3) the word Link = This is the text that will appear on the button

How to Add Buttons to Your Pages

If I wanted to add a button that says Order Now that takes the user 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 Variations (substitute these classes for btn-primary)

Class Full Code Example
btn-primary
<a class="btn btn-primary" href="#" role="button">Link</a>
Primary
btn-secondary
<a class="btn btn-secondary" href="#" role="button>Link</a>
Secondary
btn-success
<a class="btn btn-success" href="#" role="button">Link</a>
Success
btn-danger
<a class="btn btn-danger" href="#" role="button">Link</a>
Danger
btn-warning
<a class="btn btn-warning" href="#" role="button">Link</a>
Warning
btn-info
<a class="btn btn-info" href="#" role="button">Link</a>
Info
btn-light
<a class="btn btn-light" href="#" role="button">Link</a>
Light
btn-dark
<a class="btn btn-dark" href="#" role="button">Link</a>
Dark
btn-outline-primary
<a class="btn btn-outline-primary" href="#" role="button">Link</a>
Primary
btn-outline-secondary
<a class="btn btn-outline-secondary" href="#" role="button">Link</a>
Secondary
btn-outline-success
<a class="btn btn-outline-success" href="#" role="button">Link</a>
Success
btn-outline-danger
<a class="btn btn-outline-danger" href="#" role="button">Link</a>
Danger
btn-outline-warning
<a class="btn btn-outline-warning" href="#" role="button">Link</a>
Warning
btn-outline-info
<a class="btn btn-outline-info" href="#" role="button">Link</a>
Info
btn-outline-light
<a class="btn btn-outline-light" href="#" role="button">Link</a>
Light
btn-outline-dark
<a class="btn btn-outline-dark" href="#" role="button">Link</a>
Dark