Sassy Buttons
Want that fancy CSS3 button look with none of the work? Then Sassy Buttons are for you! Easily create great looking, cross-browser compatible buttons with just a few lines of Sass and you’ll be in button heaven in no time.
Want that fancy CSS3 button look with none of the work? Then Sassy Buttons are for you! Easily create great looking, cross-browser compatible buttons with just a few lines of Sass and you’ll be in button heaven in no time.
Sassy buttons is a compass extension so, naturally, you must have compass installed to use it. To install compass and the sassy buttons extension, simply open your terminal and type:
gem install sassy-buttons
Now that you have compass and the sassy buttons extension installed, it’s time to create a new compass project using the sassy buttons extension or install it in an existing project you have already created.
# Edit the project configuration file and add: require 'sassy-buttons' # From command line compass install sassy-buttons
@import "sassy-buttons"
That's it! You're now ready to start making some sassy buttons.
The sassy buttons extension provides you an easy way to create awesome cross-browser CSS3 buttons, but it also makes it easy to make your stylesheets huge. If you're planning on having a few button styles for your site you can use the provided default variables and the internal sassy button mixins to DRY up your stylesheets.
When you install sassy buttons into a project, it adds a partial to your sass directory called _sassybuttons. In this file is all the sassy button variables used to create your buttons and a mixin, sassy-button-default-structure, to use to apply styles to all your buttons. You can change the values of these variables to match your needs and add declarations to the mixin, so all the buttons you create will inherit these properties. Below you can see a list of all the default variables and the sassy-button-default-structure mixin.
$sb-base-color: #0bc265; // Base color of your button
$sb-second-color: false; // Optional second color of button gradient
$sb-border-radius: 10px; // Button border radius
$sb-border-width: 1px; // Button border width
$sb-padding: 0.5em 1.5em; // Button padding
$sb-font-size: 20px; // Button font-size
$sb-line-height: 1.2em; // Button line-height
$sb-text-color: white; // Button text color
$sb-text-style: "inset"; // Button text shadow style
$sb-gradient-style: "matte"; // Button gradient style
$sb-auto-states: true; // Automatically create pseudo styles
@mixin sassy-button-default-structure {
display: inline-block;
width: auto;
height: auto;
cursor: pointer;
}
You have access to the internal mixins that the main Sassy Buttons mixin uses to create the buttons. Using these mixins can help you reduce css bloat and give you greater control over your buttons. The two mixins that can be use are the sassy-button-structure mixin and the sassy-button-gradient mixin. Below is both mixins and the arguments they each take.
@include sassy-button-structure(border-radius, font-size, padding);
@include sassy-button-gradient(gradient-style, first-color, second-color, text-color, text-style, auto-states);
Using the internal mixins is simple and straightforward. The sassy-button-structure mixin to add the main button structure to a selector, for example you can include the mixin on a reusable selector called .button { ... }. The sassy-button-gradient mixin can be used to add the gradient styles to a selector, for example you can have a .red, a .blue, and a .green color buttons using different sassy-button-gradient mixins. Below is an example.
.button { @include sassy-button-structure(50px, 20px); }
This will create a button structure with a 50px border radius, 20px font size and use the default padding.
.red { @include sassy-button-gradient("matte", #e86a43); }
.blue { @include sassy-button-gradient("simple", #4d8ccd); }
.green { @include sassy-button-gradient("glass", #8cbe5f); }
After creating the reusable structure and styles, you can see the results below.
To dig a little deeper into the Sassy Button extension, head on over to github and check out the source. There you can find a little more documentation on the provided defaults and mixins, and fork the project if you have some great ideas!
Like Compass, Sassy Buttons is charityware. If you enjoy using the project and find it valuable, please donate now to a great cause!