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.
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.
Wow! it looks good and with a very little html/CSS knowledge you can get it working in your site.
- Download sexy button from here and upload it to your server.
- Add link to the style sheet SexyButtons/sexybuttons.css” type=”text/css” />
- 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>
- 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.
- Download Bon Bon from here
- Add a Link to bon bon CSS file
- Got to BonBon Site.
- Look for button you want and copy paste the code.
- 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 .
Subscribe Updates, Its FREE!