How to make buttons in your site look sexier

This is a guest post by Kiran who blogs at NeuroWave. If you would like to write for Shoutmeloud, read: Shoutmeloud revenue sharing program.

Ever wonder whether there is an easy way to make your website buttons look nicer ?. When it come to running a site it is very important that you make it look nice . You can impress a new visitor by looks but then to make him/her stay you need to have content. Well back to the point “Easy ways to make buttons looks nice”.

The sexy button

Sexy Buttons is a very good framework for creating some awesome buttons. These buttons can surely grab attention.

Buttons

Image Credit:Sexy Buttons.
The data points/features these buttons offer  are as follows:

• The underlying HTML can use either <button> or <a> elements.
• They are dynamic and shrink/expand to fit their text labels.
• There are four states: normal, hover/focus, active, and disabled.
• The labels can include icons. Use one of the 1000+ included Silk icons or use your own. Icons are specified via HTML class attribute.
• They use the sliding doors CSS technique for increased performance.
• They support different skins by simply changing an HTML class attribute.
• A layered Photoshop template is provided to assist in creating new skins.
• Easy to implement.
• No Javascript required.

Usage

Wow! it looks good and with a very little html/CSS  knowledge you can get it working in your site.

1. Download sexy button from here and upload it to your server.
2. Add link to the style sheet  SexyButtons/sexybuttons.css” type=”text/css” />
3. Now you need to go through the css to find which type of button you need, example if you need an OK/Submit” button here is the code to add it

   <button type="reset" class="sexybutton"><span><span><span class="ok">Submit</span></span></span></button>

4. Ah!! too much work.Now just admire the buttons.

Well sexy button are nice but they add a little “I mean business” feel. If you are looking  for a candy toned “all fun” and huge buttons then its time to look into

Bon Bon Sweet css3 button

Well for those of you who went “What button ?” BonBon means candy in french. Bon Bon button are nice. If you a running a site where you don’t want it to look all serious then Bon Bon buttons are must look for.

Well using bon bon is pretty simple . All you need Ctrl + C and Ctrl + V. As a One-liner goes”Programming is driven by cut and powered by paste.”. That apart lets take a closer look.

Usage:

1. Download Bon Bon from here
2. Add a Link to bon bon CSS  file
3. Got to BonBon Site.
4. Look for button you want and copy paste the code.
5. After you’ve done all you work . Don forget to admire the buttons.

But while using BonBon be sure about the flaws. Click here to read BonBon flaws .

Things to note:

Here are a few things you need to note before you make the changes in your WordPress Style Sheet.

• Be sure you are making changes in the right place.A wrong override is a second more wasted by your browser figuring which style to use.
• If you aren’t sure of the changes you are making , take a back up before making changes. To learn more about taking back up click here

That’s it about the two button framework which I like the most. If you are aware of other frameworks, do share your thoughts .

Article by Kiran

Kiran has written 1 articles.

If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.

Follow @ShoutMeLoud