Fancy Buttons Are Here!
Update: Fancy Buttons is under active development and this blog post will slowly go out of date. Checkout the Fancy Buttons Project Page »
Here’s a screenshot of some fancy buttons from the github project example. Hover to see what they look like without CSS gradients.
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
- Rounded corners, Text shadows, and Gradients + 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 open source 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.