CSS3 ButtonBuilder is now available on the Mac App Store!

CSS3ButtonBuilder lets you visually create sophisticated CSS only buttons (without the use of background images) that are cross-browser. By simply adjusting sliders or numerical input you can adjust the values for various CSS3 properties and see the results in real-time in the preview window. When you are done, you can output cross-browser CSS3 markup for inclusion in your sites stylesheet. CSS3 ButtonBuilder also lets you save and re-load your designs for later use or adjustment.

CSS3 ButtonBuilder

The application features:

A live updating preview that also lets you change the button text and the background colour so that you can see how your design will work on the same background colour as your site.

live preview of your design

Sliders to adjust all numerical values (as well as numerical input for precision).

easy to use sliders

Fully featured rgba colour pickers — clicking on a colour-well opens an rgba colour picker that lets you adjust the rgb values as well as the transparency. You can also choose form pre-set colours and lock the sliders for greyscale output.

fully-featured rgba colour pickers

You can select whether your button will have a solid background colour or a CSS3 gradient. The gradients are fully customizable — you can add as many different colour-stops as you like and adjust their values as well as choosing the direction (horizontal, vertical, diagonal, radial) of the gradient.

full control over css3 gradients

You can save your designs and re-load them at anytime to re-use the code or adjust the design. Save your work simply by clicking on the ‘Save’ button and typing a name for the design. Open a saved design by clicking on ‘Load’ and selecting the design from the list. Clicking on the X icon to the left of the saved button thumbnail will delete it.

saving and loading designs

When you are happy with your button design you can easily and quickly output the CSS3 markup needed to apply the design to either an anchor <a> element or a form element <button> or <input>.

outputting css3 markup

The application preferences allows you to select which web browsers you would like to generate compatible CSS3 markup for. CSS3 ButtonBuilder generates code that supports the 5 major browsers: Chrome, Firefox, Safari, Opera and Internet Explorer*. As default the app will always output the standard WC3 properties for your design.

css3-buttonbuilder-browsers

* full browser support (particularly in the case of IE), refers to the use of the most up to date version of the browser.

Take the pain out of hand-coding cross-browser CSS3 buttons with CSS3 ButtonBuilder! Now on the Mac App Store.

Available on the Mac App Store
blog comments powered by Disqus
HOME