Cool CSS3 button maker

CSS3 button maker is a simple and great online tool created by Chris Coyier from CSS Tricks. This tool allows you to generate a image-less button fully making use of CSS3. I am sure that some of you may don’t know what  CSS3 is really about. CSS3 is a collection of modules that extend the previous CSS2 specification that we all know. CSS level 3 is currently under development. Read further about CSS3 here.

CSS3 Button Maker

Button above was made fully with CSS3. The effects are clearly visible in latest versions of Firefox, Konqueror, Opera or Safari/Webkit. In older browers that don’t support these properties, the fallback is solid-color background, no shadows, and square corners which is not a big deal as everybody are moving to new browsers. To create such button for your use, visit CSS3 button maker now. Here is a preview of the super duper online tool.

Once you’ve customized the button, click on the button “View the CSS” to get the CSS code. Copy the code and go to Blogger > Design > Edit HTML and search for ]]></b:skin>. Paste the copied code immediately before ]]></b:skin> and click Save.

To use it in posts or anywhere in your template, simply add a class=’button” attribute in anchor tag. Here is a sample button and its code.

CSS3 Button Maker

<a  href="http://css-tricks.com/examples/ButtonMaker/">CSS3 Button  Maker</a>

You are done.

One Reply to “Cool CSS3 button maker”

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.