Bedrock is my lightweight, yet powerful front-end framework for developing modern websites and web apps. Bedrock is still in development – more web components are coming soon!In this tutorial, I’m going to show you how-to use buttons in Bedrock.

See the Pen Bedrock Buttons by Brandon Himpfen (@brandonhimpfen) on CodePen.

Add Bedrock to your website

Firstly, we need to add Bedrock to your web page. Download bedrock, upload it to your hosting account and add the following HTML to your web page:
In the above example, make sure you change path-to-bedrock with the URL path to where the bedrock.min.css file is located.

HTML

There are currently 33 different styles (7 defaults, 14 coloured, 5 supportive and 7 social media) of buttons in four (4) different sizes.

By default, the HTML for a button is:

<a href="" title="" class="button button-*">Button Name</a>

Where in button- is the style name of the button.

For example, if you want to use success style button, the HTML would be:

<a href="" title="" class="button button-success">Button Name</a>

Whereas, the purple style button, would use the following HTML:

<a href="" title="" class="button button-purple">Button Name</a>

Button Sizing

There are four (4) button sizes: small, default, large and huge.

The default size is standard. Therefore, requires no adjustments in the HTML. However, small, large and huge buttons do require a small HTML adjustment, which is similar to adding style to the button:

<a href="" title="" class="button button-*">Button Name</a>

Where, in this case, in button- is the button size.

Huge:

<a href="#" class="button button-huge">Huge</a>

Large:

<a href="#" class="button button-large">Large</a>

Small:

<a href="#" class="button button-small">Small</a>

Note: Bedrock is built using Sass. Therefore, if you wish, button styles and their border radius can be changed/customized.