08 June 2010

[web design] CSS Button Maker - Create CSS 3 Web Page Buttons With Live Preview!

CSS 3 is making a lot of things possible that I didn't think would ever be possible via mere Cascading Style Sheets, and this demo (from CSSTricks) shows how you can style buttons, complete with hover effects (which is something I do know a little about and used just recently), rounded corners, gradients, and everything.

Finally & nifty web buttons without having to have a graphics utilty (not that I'm suggesting anyone give up thier Photoshop, of course).

The sliders allow you alter the vertical and horizontal size and the corner radius. The various color bars bring up a familiar-looking color picker that allows you to determine the color of the element, each controlling the gradients, hover colors, active colors, &c. the little drop-down allows you choose between three web-standard fonts.

And here's the best thing about it: not only is that a live preview, you click the button - and get the CSS you need to implement it.

The CSS3 Button Maker is available here: http://css-tricks.com/examples/ButtonMaker/#, or click upon the pic above. Happy button-making!

Thanks to Smashing Magazine for pointing me this direction.

Technorati Tags: , , ,

Powered by ScribeFire.

No comments: