Web Style Guide: Links & Buttons

HTML: Hyperlinks

Hyperlinks are used to navigate between sites and pages online. We have several easy-to-use formatting options.

Link: Default

<a href="#" title="">I'm a hyperlink</a>

Link: Button Link Class

CSS Classes: btn btn-link
<a class="btn btn-link" href="#" title="">I'm a hyperlink</a>

Link: Button Text Class

CSS Classes: btn btn-text
<a class="btn btn-text" href="#" title="">I'm a hyperlink</a>

Link: Button Brand Colors

<a class="btn btn-red" href="#" title="">Red</a>
<a class="btn btn-gray" href="#" title="">Gray</a>
<a class="btn btn-gray-dark" href="#" title="">Gray Dark</a>
<a class="btn btn-gray-light" href="#" title="">Gray Light</a>
<a class="btn btn-white" href="#" title="">White</a>
<a class="btn btn-black" href="#" title="">Black</a>
<a class="btn btn-blue" href="#" title="">Blue</a>
<a class="btn btn-blue-dark" href="#" title="">Blue Darkt</a>
<a class="btn btn-blue-light" href="#" title="">Blue Light</a>
<a class="btn btn-orange" href="#" title="">Orange</a>
<a class="btn btn-orange-mid" href="#" title="">Orange Mid</a>
<a class="btn btn-orange-light" href="#" title="">Orange Light</a>
<a class="btn btn-green" href="#" title="">Green</a>
<a class="btn btn-green-dark" href="#" title="">Green Dark</a>
<a class="btn btn-green-light" href="#" title="">Green Light</a>
<a class="btn btn-teal" href="#" title="">Teal</a>
<a class="btn btn-teal-dark" href="#" title="">Teal Dark</a>
<a class="btn btn-teal-light" href="#" title="">Teal Light</a>

Link: Button Utility Colors

<a class="btn btn-default" href="#" title="">Default</a>
<a class="btn btn-primary" href="#" title="">Primary</a>
<a class="btn btn-secondary" href="#" title="">Secondary</a>
<a class="btn btn-info" href="#" title="">Info</a>
<a class="btn btn-danger" href="#" title="">Danger</a>
<a class="btn btn-warning" href="#" title="">Warning</a>
<a class="btn btn-success" href="#" title="">Success</a>

Link: Button Sizes

CSS Classes: btn btn-lg btn-sm
<a class="btn btn-large" href="#" title="">Link Button Large</a>
<a class="btn btn-small" href="#" title="">Link Button Small</a>

Link: Button Block (Full Width)

CSS Classes: btn btn-block
<a class="btn btn-block" href="#" title="">Link Button Block</a>

HTML: Buttons

Buttons are used with forms and interactive client-side JavaScript. We have several easy-to-use formatting options.

Button: Button Class

CSS Classes: btn

<button class="btn">Button</button>

Button: Button Link Class

CSS Classes: btn btn-link

<button class="btn btn-link">Button Link</button>

Button: Button Text Class

CSS Classes: btn btn-text

<button class="btn btn-text">Button Text</button>

Button: Brand Colors

                                   

<button class="btn btn-red">Red</button> 
<button class="btn btn-gray">Gray</button> 
<button class="btn btn-gray-dark">Gray Dark</button> 
<button class="btn btn-gray-light">Gray Light</button> 
<button class="btn btn-white">White</button> 
<button class="btn btn-black">Black</button> 
<button class="btn btn-blue">Blue</button> 
<button class="btn btn-blue-dark">Blue Dark</button> 
<button class="btn btn-blue-light">Blue Light</button> 
<button class="btn btn-orange">Orange</button> 
<button class="btn btn-orange-mid">Orange Mid</button> 
<button class="btn btn-orange-light">Orange Light</button> 
<button class="btn btn-green">Green</button> 
<button class="btn btn-green-dark">Green Dark</button> 
<button class="btn btn-green-light">Green Light</button> 
<button class="btn btn-teal">Teal</button> 
<button class="btn btn-teal-dark">Teal Dark</button> 
<button class="btn btn-teal-light">Teal Light</button> 

Button: Utility Classes

               

<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-default" disabled="disabled">Disabled</button>

Button: Sizes

CSS Classes: btn btn-lg btn-sm

   

<button class="btn btn-lg">Button Large</button>
<button class="btn btn-sm">Button Small</button>

Button: Block (Full Width)

CSS Classes: btn btn-block

 

<button class="btn btn-block">Button Block</button>

Design, Tools & Training


Top