Uberbutton - A Compass plugin

A class and a mixin to generate nifty buttons.

What it does

• Works on both block-level elements, inline elements, and buttons.
• For browsers that don't support gradients, two gradient colors are mixed to provide a solid background.
• For browsers that don't support RGBA, non-alpha color is specified as a fallback.
• The border color is calculated by darkening the fill color.
• Text color is determined automatically using the gradient colors given (if they are dark, text is white; if they are light, text is black)
• The dark and light buttons each have different text colors and shadows for the appropriate engraving effect.
• The lighter gradient colors for hover, and flipped gradient for the pressed state are computed automatically.
• With CSSPIE, its gradients and rounded corners work with IE!

Installation

1. Add this to your Gemfile

   gem "uberbutton"

2. Add the following line to config/compass.rb

   require 'uberbutton'

3. Install the extension into compass

   compass install uberbutton

Usage

The class "uberbutton" includes common base styles for each button. The mixin "uberbutton" lets you create classes for different buttons.

Use the class "uberbutton" in conjunction with a style class you create. (This isolates the common code and is for DRY).

Example

Create the style class in scss

@import "uberbutton/uberbutton"

.main-cta {
  @include uberbutton(start-color, end-color, "path_to_background_pattern");
}

Then use both the style class you just created and uberbutton to construct button.

<a class="uberbutton main-cta">
  Hello world.
</a>

Customization

The following customizations are available:

CSS3PIE

If you want the gradient, rounded corners and shadows to work in IE, download CSS3PIE, and place its folder under public with the name "css3pie". If you need to upload the folder to a different location, set the following variable before importing uberbutton.

$uberbutton-csspie-location: "/css3pie/PIE.htc";

BASE BUTTON CLASS

The class "uberbutton" contains the common styles to each button. If you need to rename this class, set the following variable before importing uberbutton.

$uberbutton-base-class: "uberbutton";

Author

Cemre Gungor started this project while drinking Four Loko.