Buttons: colección de botones listos para usar

Crear botones con CSS es técnicamente fácil,  pero cuando no tenemos el tiempo suficiente o solo necesitamos realizar un prototipo sin apegarnos a un diseño especifico    siempre es recomendable tener alguna librería o recursos a la mano para agilizar la tarea.

Buttons es una colección  de estilos para botones muy atractivos listos para  usar  en tus proyectos, si has usado TW bootstrap sabes lo fácil que es aplicar  un estilo a un elemento html  para crear un botón, con Buttons es prácticamente  lo mismo  ya que  nos proporciona un conjunto clases CSS  que pueden ser aplicadas directamente a elementos html  como enlaces o de tipo input submit/button .

Por default  nos ofrece varios  estilos  : planos , redondos,cuadrados, con efectos de sombra y relleno , incluso puedes usar FontAwesome para incrustar iconos dentro del botón.

Para personalizar   nuestros botones  es indispensable tener instalado  Sass y Compass , aunque  para usar los estilos que vienen por defecto estas herramientas  no son necesarias .

Para trabajar con Buttons :

1. Descargamos la libreria
2. Incluimos los archivos necesarios en nuestro archivo :

   <!--incluye font awesome solo si necesitas iconos-->
   <link rel="stylesheet" href="css/font-awesome.min.css">
   <!-incluye jquery solo si necesitas botones dropdown-->
   <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
   
   <link rel="stylesheet" href="css/buttons.css">
   <script type="text/javascript" src="js/buttons.js"></script

3. Aplicamos  los  estilos :

   <a href="#" class="button button-pill">press me</a>
   <a href="#" class="button button-pill button-primary">press me</a>
   <a href="#" class="button button-pill button-action">press me</a>
   <a href="#" class="button button-pill button-highlight">press me</a>
   <a href="#" class="button button-pill button-caution">press me</a>
   <a href="#" class="button button-pill button-royal">press me</a>

Resultado : 

[ Enlace : Buttons ]