Free download: CSS3 buttons

Button states saved as images and toggled by CSS are so out of date it’s painful. We should all be using CSS3 to create buttons. We all know why: they’re easily editable, cross-platform, lightweight, accessible; the list of benefits is endless.

What’s not always so easy is coding them up. Sure you can use a framework, but for most projects that’s just too big of an overhead. Maybe you want to stick to flat design; just add a background color and make sure the default border is removed. Anyone else will be delighted that Irina Petculescu, a self proclaimed CSS3 junky and founder of prowebdesign.ro has put together these free CSS3 buttons. See her site for more freebies.

They come in two styles: flat, which maintains a small bevel; and glossy, with nicely rendered gradients. There’s even some basic transitions to make the rollovers nice and smooth.

What’s even better is that the team made sure they used rgba formatting for the styling, leaving the background colors in hex format. That means you’re free to change any of the hex colors you see in the CSS and the button background color will change instantly.

The buttons are free for personal and commercial use, so download them now and start tweaking them for your brand.

[includeme file=”examples/css3-buttons.php”]

How do you code buttons? Is there ever a case for image states any longer? Let us know your thoughts in the comments.

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.