Purrrrty Buttons with CSS3

I recently refreshed the form styling at ParkWhiz, and I’m really happy with how the buttons turned out. You can find a live demo with the CSS code here and the gradient background image is here.

The CSS is a little hairy, but there’s no extra markup; just use a button tag:

<button>Button Text</button>

You can add an icon to the button by wrapping the inner text in a <span> and using some extra CSS. (That’s why a <button> tag is used instead of an <input> tag.)

Button with icon

<span><button type=”submit”>Button Text</span></button>

The button looks as intended in Firefox, Chrome, Safari, and Opera. IE doesn’t support rounded corners and IE6 doesn’t support the transparent PNG used to create the 3rd look, but it degrades gracefully with the use of some IE-specific CSS.

jonthornton posted this