Home / Development / Styling Buttons

Basics

<!-- Anchors (links) -->
<a href="about.html" class="button">Learn More</a>
<a href="#features" class="button">View All Features</a>

<!-- Buttons (actions) -->
<button type="button" class="button success">Save</button>
<button type="button" class="alert button">Delete</button>
Learn More View All Features

Sizing

<a class="button tiny" href="#">So Tiny</a>
<a class="button small" href="#">So Small</a>
<a class="button" href="#">So Basic</a>
<a class="button large" href="#">So Large</a>
<a class="button expanded" href="#">Such Expand</a>
<a class="button small expanded" href="#">Wow, Small Expand</a>
So Tiny So Small So Basic So Large Such Expand Wow, Small Expand

Coloring

<a class="button primary" href="#">Primary</a>
<a class="button secondary" href="#">Secondary</a>
<a class="button white hollow" href="#">White</a>
<a class="button success" href="#">Success</a>
<a class="button alert" href="#">Alert</a>
<a class="button warning" href="#">Warning</a>
Done right by

We're ready to serve you safely!
Ask about our zero contact service calls.