How to Install
To create a new project based on fancy-buttons:
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?
Here’s a sample 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
That’s a lot of CSS to write, effectively reduced to a single mixin. Of course, it’s also great that you can use the bare minimum HTML.
What’s Compass and Where’s the CSS?
In the screencast I’m writing my styles in Sass which is much cleaner and more powerful than CSS. Every time I save the file, Compass automatically compiles the Sass to regular or compressed CSS. If you’re not familiar with Compass, you should check it out because this is the future of web design. Without compass I’d be posting stylesheets and images, and trying to explain how you could customize them. Compass lets me package my stylesheets as a plugin so it’s easier to share, and easier to use.
I’d like to point out, if you prefer using methods like sliding doors, you can use fancy buttons to generate source images. Just fill a button with no-break spaces ‘ ’ to render an empty button. Take a screenshot and cut it up to use as a background image.
If You Liked This
I’m starting a screencast series about how to use SASS and Compass to be an efficient and incredible web designer. Subscribe for updates.