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:
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!
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 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!
4 Comments
Very nice. Thanks for sharing!
Sweetness. I like the IE filters. I’d never seen the gradient/shadow ones before. I’ve heard the alpha filter can weigh down the page load. Any idea if having multiple filters makes a big difference in IE?
Hey Heff!
I used the awesome buttons extensively in various projects that all support at least IE 7 and above. Some do support IE6. I’ve also heard that filters can slow down the performance, but never realized a difference on my projects. I guess it depends on your machine.
And btw, I see the post is a little screwed since we swichted our CMS lately.
You can find the latest version here:
http://gr2m.github.com/awesome-buttons/