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!
Follow us on Twitter
One Comment
Very nice. Thanks for sharing!