Buttons

version 1.0

Small button css library made by Peter Ahlgren.

DOWNLOAD


  • 5 different sizes.
  • 3 different forms, square, rounded and pills.
  • 5 different colors.
  • Works out of the box on both hyperlinks and <button>'s.

Example of usage:

Go Go Go
Go Go Go
Go Go Go
Go Go Go
Go Go Go

Place this line in the <HEAD> of your html-file:


<!-- Buttons CSS -->
<link rel="stylesheet" href="css/buttons.css">
				

Here's a few code snippets that will explain how the button library works:


<a href="#" class="btn btn-tiny">Go</a>
<a href="#" class="btn btn-rounded btn-tiny">Go</a>
<a href="#" class="btn btn-pill btn-tiny">Go</a>
<button class="btn btn-tiny"><i class="fa fa-coffee"></i></button>
<button class="btn btn-tiny btn-rounded"><i class="fa fa-coffee"></i></button>
<button class="btn btn-tiny btn-pill"><i class="fa fa-coffee"></i></button>

<a href="#" class="btn btn-small btn-primary">Go</a>
<a href="#" class="btn btn-rounded btn-small btn-primary">Go</a>
<a href="#" class="btn btn-pill btn-small btn-primary">Go</a>
<button class="btn btn-small btn-primary"><i class="fa fa-coffee"></i></button>
<button class="btn btn-small btn-rounded btn-primary"><i class="fa fa-coffee"></i></button>
<button class="btn btn-small btn-pill btn-primary"><i class="fa fa-coffee"></i></button>

<a href="#" class="btn btn-success">Go</a>
<a href="#" class="btn btn-rounded btn-success">Go</a>
<a href="#" class="btn btn-pill btn-success">Go</a>
<button class="btn btn-success"><i class="fa fa-coffee"></i></button>
<button class="btn btn-rounded btn-success"><i class="fa fa-coffee"></i></button>
<button class="btn btn-pill btn-success"><i class="fa fa-coffee"></i></button>

<a href="#" class="btn btn-large btn-highlight">Go</a>
<a href="#" class="btn btn-large btn-rounded btn-highlight">Go</a>
<a href="#" class="btn btn-large btn-pill btn-highlight">Go</a>
<button class="btn btn-large btn-highlight"><i class="fa fa-coffee"></i></button>
<button class="btn btn-large btn-rounded btn-highlight"><i class="fa fa-coffee"></i></button>
<button class="btn btn-large btn-pill btn-highlight"><i class="fa fa-coffee"></i></button>

<a href="#" class="btn btn-giant btn-caution">Go</a>
<a href="#" class="btn btn-giant btn-rounded btn-caution">Go</a>
<a href="#" class="btn btn-giant btn-pill btn-caution">Go</a>
<button class="btn btn-giant btn-caution"><i class="fa fa-coffee"></i></button>
<button class="btn btn-giant btn-rounded btn-caution"><i class="fa fa-coffee"></i></button>
<button class="btn btn-giant btn-pill btn-caution"><i class="fa fa-coffee"></i></button>
					

© Peter Ahlgren, 2015.

Contact: peter@peterahlgren.com