Make your buttons look super awesome

Back in April, ZURB published the super awesome buttons to showcase what can now be done with CSS and RGBA. They are so awesome! They still look like images but loading speed and maintainability continues to benefit from normal HTML buttons. Below is what they look like:

Super-awesome-buttons-all

I started using these buttons in some of our projects and extended them to improve the cross browser compatibility. I added a nicer design for when the buttons get clicked, and removed the necessity to set to different background colors for different states of the buttons.

Here is how the even more awesome buttons look like, click’em!

| I’m just a link – Click me

This is how the css magic looks like


/* set an awesome color for the buttons */
button.awesome,
input.awesome,
a.button.awesome {
background-color: #111;
}
/* Touch the rest at your onw risk. */
button.awesome,
input.awesome,
a.button.awesome {

font: inherit;
background-repeat: repeat-x;
color: #fff;
text-decoration: none;
position: relative;
cursor: pointer;
border: 0;
font-style: normal;
font-weight: bold;
line-height: 1;

padding: 5px 10px 6px;
font-size: 13px;

/* IE only stuff */
border-bottom: 1px solid transparent\9;

/* not all browser support these, but who cares? */
text-shadow: 0 -1px 1px rgba(0,0,0,0.25), -2px 0 1px rgba(0,0,0,0.25);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);

/* one image for all states
see http://www.alistapart.com/articles/sprites */
background-image: url(awesome-overlay-sprite.png);
background-position: 0 0;

/* cross browser inline block hack
see http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ */
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
*display: inline !important;
position: relative;

/* help IE to calm down a bit */
zoom: 1;

/*disable text selection (Firefox only)*/
-moz-user-select: none;
}
/* hide selection background color */
.awesome::selection {
background: transparent;
}

button.awesome:hover,
input.awesome:hover,
a.button.awesome:hover {
background-position: 0 -50px;
color: #fff;
}
button.awesome:active,
input.awesome:active,
a.button.awesome:active {
background-position: 0 100%;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.7);
/* unfortunately, Safari seems not to support inset yet */
-webkit-box-shadow: none;

/* IE only stuff */
border-bottom: 0\9;
border-top: 1px solid #666\9;
}

button.awesome.small, input.awesome.small, a.button.awesome.small { padding: 4px 7px 5px; font-size: 10px; }
button.awesome.small:active, input.awesome.small:active, a.button.awesome.small:active { padding: 5px 7px 4px; }
button.awesome.medium, input.awesome.medium, a.button.awesome.medium { /* default */ }
button.awesome.medium:active, input.awesome.medium:active, a.button.awesome.medium:active { padding: 6px 10px 5px; }
button.awesome.large, input.awesome.large, a.button.awesome.large { padding: 8px 14px 9px; font-size: 14px; }
button.awesome.large:active, input.awesome.large:active, a.button.awesome.large:active { padding: 9px 14px 8px; }

Turn a or a Link just by adding the ‘awesome button’ classes:


→

→

Link before →
Link after

→

→
Link before → Link after

Awesome Blueprint Plugin

These super awesome buttons play well together with the blueprint css framework. Simply get the files from github and put them in you blueprint/plugins folder. Works awesome.

Demo

You can find the latest version of the demo in the git repository or you can open it here.

Let us know what you think!

One Comment

  1. Posted October 9, 2009 at 8:30 pm | Permalink

    Very nice. Thanks for sharing!

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">