Fancy Buttons 0.3.6 - Now With Custom Gradients!

If you’re new to Fancy Buttons, checkout the Project Page and the Demo

To make writing custom gradients easier, I’ve written a gradient mixin. To use the gradient mixin you need Compass 0.10 which is currently available as a pre-release. You’ll have to manually install it until Compass 0.10 final is released in the next couple of weeks. Just run this and you should be good to go.

To learn how to use the gradients mixin, you can read the source. It’s pretty simple.

Demo Screenshot

Hover to see what they look like without CSS gradients.

This release lets you use glossy, matte, or your own custom gradients, and it has a new inverted click style. For a full list of changes, read the changelog.

How to Write Custom Gradients

The demo shows some small buttons using custom radial gradients. I’ll show you how you can use custom gradients in your projects with the new gradients mixin in Compass 0.10.0-pre2.

Write a “custom-fancy-gradient” mixin that takes two variables, light and dark versions of the base color. This will produce a simple matte gradient.

To use a different gradient style for when the button is clicked create a mixin named “invert-custom-fancy-gradient”. In this example, I’m changing the colors a bit, and reusing the main custom gradient mixin. That way if I decide to change the type of gradient, I only have to change it in one place.

To use your custom gradient for every button in your project, set a global variable like this.

If you want to only use the custom gradient for some buttons you can always do something like this.

The demo uses a really nice custom radial gradient. Here’s what the custom gradient mixin looks like for that.

If you want to write your own radial gradient mixin, I suggest browsing the examples on The art of web. It’s pretty tricky, but you can get some awesome effects with a little bit of fiddling.