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):
Then import fancy-buttons in your sass file:
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.