Blueprint buttons

Blueprint Buttons

Welcome to my second example of compass. Today we will see how to create awesome button with Compass and blueprint.

First, create and watch your project:

# compass create 02 --using blueprint
# compass watch 02

Don't forget the second command (compass watch) or compass will not generate your stylesheets.

The Markup

Let's start with the html. We will insert 3 anchor elements and 3 button elements. There is many case to style an anchor to look like a button. For example, when you have a form, you can use the button element for the "Submit" but if you need an anchor your "Cancel" button, because you are redirecting to another page, you may want it to look consistent with your other buttons.

<div id="container">

  <h1>Anchor buttons</h1>
  <p>
    <a href="#" class="btn">Click Me</a>
    <a href="#" class="btn positive">Click Me</a>
    <a href="#" class="btn negative">Click Me</a>
    <a href="#" class="btn gorgeous">Click Me</a>
  </p>

  <h1>Button buttons</h1>
  <p>
    <button class="btn">Click me</button>
    <button class="btn positive">Click me</button>
    <button class="btn negative">Click me</button>
    <button class="btn gorgeous">Click me</button>
  </p>

</div>

I added a container elements to be render it nicely into our examples, but this isn't mandatory.

The Stylesheet

Our sass stylesheet will need the usual reset and typography imports. To use blueprint buttons you need to import blueprint/buttons (duh). I added another import which is not mandatory but will help us design a gorgeous buttons (inspired a lot by Twitter's Bootstrap).

@import "blueprint/reset";
@import "blueprint";
@import "blueprint/buttons";
@import "compass/css3";

Documentation : blueprint/buttons, compass/css3

Now we will define our 3 css classes. The "btn" class added to an anchor or a button will apply a default button style. The "negative" and "positive" classes will override some buttons properties to make them look negative or positive.

a.btn {
  @include anchor-button;
  @include button-colors;
  @include button-hover-colors;
  @include button-active-colors;
}

button.btn {
  @include button-button;
  @include button-colors;
  @include button-hover-colors;
  @include button-active-colors;
}

a.positive, button.positive {
  color: #529214;
  @include button-hover-colors(#529214, #e6efc2, #c6d880);
  @include button-active-colors(white, #529214, #529214);
}

a.negative, button.negative {
  color: #d12f19;
  @include button-hover-colors(#d12f19, #fbe3e4, #fbc2c4);
  @include button-active-colors(white, #d12f19, #d12f19); 
}

So these are the includes compass give us to style our button. Not so bad heh ?

You can find the complete reference for those mixins here Blueprint Buttons.

Now we will go a bit further and add a very nice looking button with gradient and shadow.

a.gorgeous, button.gorgeous {
  @include background-image(linear-gradient(#049cdb, #0064cd));
  @include border-radius;
  @include box-shadow(inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05));
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #0064cd #0064cd #003f81;
  &:hover {
    color: white;
    border-color: #0064cd #0064cd #003f81;
    background: #0064CD;
  }
}

So basically, we add a background gradient (generated using a linear-gradient), round corners, shadow inside our button and shadow in our text. These are css3 mixins from the compass framework.

Last words

You can now insert button into your web application and style them beautifully with blueprint and css3. The "gorgeous" button is just an example of what you can achieve with css3, you can further and explore all possibilites. Example : Twitter's Bootstrap has a gradient transition for mouse hover which I didn't reproduce here. (See Twitter Bootstrap).

Don't forget that you can change any default attributes like the default color and font-style of your button and the best place to put these default is in your _base.scss partial. (See Best practices)