3 Sweet CSS3 Button Generators

CSS-Tricks Button Maker

If you’re just getting into Web design/development, it may be hard to appreciate the full awesome-ness of CSS3. Properties like text-shadow, box-shadow, gradients, border-radius, and @font-face let us recreate complex design elements  in pure code, rather than having to rely on image files. The advantages are obvious and huge:

  • Fewer image files equals less “page weight.”
  • Easier to create responsive design elements.
  • Want to change something? No problem. Tweaking a line or two of code beats revising and re-slicing in Photoshop any day.

One downside—if you can call it that—is that you need to write a lot of code to create something simple like a button. And different browsers have their own syntax rules for the same properties. That means writing the same code several times—in slightly different ways—so it’ll look similar in Firefox, Chrome, Opera, Safari, and *grumble* Internet Explorer.

Fortunately, there are some great tools out there that make CSS3 buttons a snap. Just enter your settings, copy the resulting code, and voila!

CSS-Tricks Button Maker

CSS-Tricks Button Maker

The Button Maker from Chris Coyier of CSS-Tricks features an intuitive interface and all the features you’d expect in a CSS3 button.

Live Tools Button Builder

Live Tools Button Builder

The Live Tools Button Builder is what I used to create many of the buttons here on Coding Campground. With its clean design and full set of features, it’s a solid choice.

Button X

Button X

It calls itself the “Best CSS3 Button Maker.” Button X is perhaps the most feature-rich of the bunch, and offers an intuitive interface to boot. Well worth checking out.

Any Others?

There are tons more out there. Too many to list. But if you have a favorite not listed above, let us know in the comments.

No Happy Campers Have Responded Yet

Add a Comment