fancy-buttons: Fancy CSS Buttons using Sass and Compass

Fancy buttons is a Compass Extension written in Sass (installable as a gem) that helps you to easily generate beautiful, flexible CSS3 buttons. It’s written and maintained by Brandon Mathis and he recently announced the 1.0 release of Fancy Buttons.

Listen to Episode 0.0.1 (our first episode) to learn more about Compass

How to Install

First things first we need to get compass and the fancy buttons gem installed.

gem install compass
gem install fancy-buttons

To create a new project based on fancy-buttons:

compass install -r fancy-buttons -f fancy-buttons /path/to/project

To add fancy-buttons to an existing compass project, add this to your configuration file (rails: compass.config, other: config.rb):

require 'fancy-buttons'

Then import fancy-buttons in your sass file:

@import "fancy-buttons";

What’s It Doing?

Below are details of what CSS rules this mixin handles for you:

• Button reset - to get browsers to the same starting point
• CSS3: Rounded corners, Text shadows, Gradients, Inset box shadows, and browser vendoring
• Background image fallback
• Padding, Text size, line-height, etc
• Default, Hover, and Active states for all styles
• Lots of tricky color math to generate beautiful gradients from one color

If you were writing the actual CSS for this (and not leveraging Sass), it would be a lot of CSS to write. Fancy buttons has taken the pain out of the way and effectively reduced all that thinking and math down to a single Sass mixin. Of course, it’s also great that you get to use the bare minimum HTML.

[Source on GitHub] [Homepage] [Demo]