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.

Getting Started

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.

Installing into your compass project

# Edit the project configuration file and add:
require 'sassy-buttons'

# From command line
compass install sassy-buttons

Import Sassy Buttons partial into your scss/sass file

@import "sassy-buttons"

That's it! You're now ready to start making some sassy buttons.

Creating Buttons

The Sassy Buttons extension gives you a set of mixins and defaults that allow you to create your custom buttons. The provided defaults can be customized to give you more control over your buttons, read more about the provide defaults here.

There are five different gradient styles and three text styles to choose from. There is also two optional styles to give your buttons a little more character. There is a lot of options and it will all make more sense after a little explaining and a few examples.

The Sassy Button mixin

The Sassy Button mixin will use the provided defaults, or you can pass it the optional arguments to customize the buttons further.

#Full sassy button mixin with argument descriptions.
@include sassy-button(gradient-style, border-radius, font-size, first-color, second-color, text-color, text-style, auto-states)

#Calling the mixin using defaults
@include sassy-button;

#Calling the mixin using arguments
@include sassy-button("shiny", 15px, 26px, #ffd71a, #ffaa1a);

Gradient Styles

There are five available gradient styles, below is an example of each. Click the button to see the mixin used to create it.

Text Styles

There are three available styles, inset, raised and none. Notice how the text style automatically changes based on the text color. Click on the button to see the mixin used to it.

Additional Styles

There are two optional styles that you can add to any sassy-button. Click on the button to see an the mixin used to create it.

Advanced Usage

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.

Sassy Button Default Variables

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.

Variable List

$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 

Default Structure Mixin

@mixin sassy-button-default-structure {
  display: inline-block;
  width: auto;
  height: auto;
  cursor: pointer;

Internal Mixins

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.

Create a reusable button class with button structure

.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.

Create a few button styles

.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!