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
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
3) the word Link = This is the text that will appear on the button
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>
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 |