Buttons & Links

Buttons & links allower users make choices and take action.

Buttons

Allows users make choices and take action.

Standard Buttons





HTML
<a href="#" class="btn btn-primary">Primary</a>




HTML
<a href="#" class="btn btn-secondary">Secondary</a>




HTML
<a href="#" class="btn btn-tertiary">Tertiary</a>




HTML
<a href="#" class="btn btn-black">Black</a>




HTML
<a href="#" class="btn btn-white">White</a>




HTML
<a href="#" class="btn btn-danger">Danger</a>




HTML
<a href="#" class="btn btn-warning">Warning</a>




HTML
<a href="#" class="btn btn-simple">Simple</a>



Specialty Buttons




HTML
<a href="#" class="enroll-now-btn">ENROLL NOW</a>




Text Buttons & Links

Allow users to navigate or get additional information that is secondary to any main action (which would use the button UI).

Inline


Please follow this inline link.

Please follow this inline link hover.

Please follow this inline link focused.

Please follow this inline link visited.

Please follow this inline link visited hover.


HTML
<a href="#" class="inline-link">inline link</a>


Internal


Internal Link

Internal Link hover

Internal Link focused

Internal Link visited

Internal Link visited hover


HTML
<a href="#" class="internal-link">Internal Link</a>


External


External Link

External Link hover

External Link focused

External Link visited

External Link visited hover


HTML
<a href="#" class="external-link">External Link</a>


Text-Only Button


Text Link

Text Link hover

Text Link focused

Text Link visited

Text Link visited hover


HTML
<a href="#" class="btn-text-only">Text Link</a>