Buttons V. 2.0.0

Buttons is a highly customizable production ready mobile web and desktop css button library. Buttons is free and open source.

Download
U A Unicorn UI Module www.unicorn-ui.com

Shapes & Sizes

Choose from a variety of shapes and sizes.

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

Border & Borderless Buttons

Icons provided by Font Awesome Great for mobile devices

Buttons App

3D Buttons

Mimics the appearance of a real life button

Check out the new site! Visit Us! Go Say Hi!

Raised Buttons

A classic looking button that offers great depth and affordance

Visit Us! Go Say Hi! Say Hi!

Long Shadows

A visual effect adding a flat shadow to the text of a button

Glowing

A pulse like glow around the edges of a button

Go Go Go Go Go

Dropdown Buttons

A dropdown menu appears when the button is pressed

Select Me

Buttons Groups

A group of related buttons displayed edge to edge

Select Me

Stacked Buttons

Block level buttons that expand the width of their container

Go Go Go Go Go Go

Button Wrappers

A wrap around effect to highlight the shape of the button and offer a subtle visual effect

Go Go

Form Buttons

Buttons works great on form elements too

Go

Tyographic Styles

A variety of tyographic styles for buttons

uppercase lowercase capitalize small caps

Semantics & Accessibility

Buttons should be used responsibly with accessibility in mind. You should use anchor tags when you are linking to an external resource or an internal page link. Use the button tag when you have an application command such as add to shopping cart. Use input tags (such as the submit input type) when creating forms. If you would like to learn more on this subject we highly reccomend reading the following articles.

Installation & Setup

  1. DOWNLOAD
  2. Include buttons in your website

    Buttons Setup

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

  <!-- Only needed if you want support for dropdown menus -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/buttons.js"></script>

  <!-- Only needed if you want font icons -->
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet">

Transition Guide 1.0 -> 2.0

We've made some major improvements to the Buttons library. In order to integrate buttons into your current project you'll need to make the following changes:

  1. Compass has been replaced with [autoprefixer](https://github.com/postcss/autoprefixer). Compass is not recommended but it is still supported.
  2. Button colors are now complete independent (ex. button-primary) we no longer have classes like button-flat-primary to achieve this you now simply add button-flat button-primary
  3. Buttons styles are now independent (ex. button-flat, button-3d, etc.). You can apply these styles and they will automatically pick up the color attached to the button (ex. button-primary button-3d)

Customize Buttons

  1. CLONE REPO
  2. Make sure you have Node.js installed.
  3. From the command line cd into the root for the Buttons directory
  4. Run npm install or sudo npm install (depending on your system permissions).
  5. On the command line run grunt dev, this will open a browser with Buttons
  6. Locate scss in the root directory
  7. You can modify the _options.scss where you can customize colors, typography, and …
  8. Anytime you save your changes the Buttons showcase page will live reload with your changes!