Super Awesome Buttons with CSS3 and RGBa: Now More Super!

Using descriptive class names and CSS3 properties like gradients and box shadows, we create a set of scalable button styles for links and buttons.

Note: Demo works best in Safari 4.x and pretty well in Firefox 3.5.

The Original Super Awesome Buttons

Many moons ago, we create the first set of super awesome buttons. They worked great with any background color and allowed us to turn any anchor or button element into a sexy call to action.

How They Work

These button styles work on any anchor a or button element just by adding the right classes:

<button class="large awesome blue" type="submit">Awesome Blue Button<button>

Using RGBa for the text-shadow, box-shadow, and border, we've created a set of buttons that are easily scalable and work on any background color.

However, they did have two fundamental flaws: they created low-contrast areas (due to the colors we use) and they require the use of an image for the gradient.

We've fixed that and now our buttons are even more super awesome!

Making Them More Super

With a little more refinement, we can make our buttons look more actionable and refined while maintaining the ability to function as a button across browsers.

Want more information on how the buttons work and implementation details like the exact CSS? Good news! We wrote a whole blog post about it!

Copyright ZURB, freely available for distribution under the MIT license.


Product Design Training from the Experts at ZURB


Reveal Modal Goodness

This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.

This is just a simple modal with the default styles, but any type of content can live in here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis sem vel enim eleifend tristique. Etiam tincidunt faucibus pharetra.

×

Log in with your ZURB ID

Log in with Google

Don't have a ZURB ID? Sign up

Forgot password?
×

Sign up for a ZURB ID

Sign up with Google

Already have a ZURB ID? Log in

×