ShoutMeLoud – Shouters Who Inspire

Superlinks
≡ Menu
≡ Menu

How To Make Buttons In Your Site Look Sexier

CW
How To Make Buttons In Your Site Look Sexier

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

 

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 .

  • Author Bio

  • Latest Post

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.


    { 15 comments… add one }

    • Conversational Agent

      Nice looking buttons and I will surely do some changes in my site. Just wondering can I change the colors and fonts of the buttons?

      Reply
      • Kiran Ruth R

        Yes you can :) ….. try with google fonts :) …. it’ll be a deadly combo :)

        Reply
    • ashish

      Can any1 guide me how to add these on wordpress

      Reply
      • Kiran Ruth R

        If you are using thesis theme its very simple to add … in your custom css override the class button .

        Reply
    • Sathish @ TechieMania

      Looks really cool. Thanks for sharing the script. I will try it my blog.

      Reply
    • Johny

      those are really sexy

      Reply
    • Sagar Rai

      It was really cool buttons

      Reply
    • tushar

      nice tips….thanks for explaining the css and html…it will help noobs like me

      Reply
    • Anup @ Hack Tutors

      Wonderful! I will use this button on my new Blogger Template site.

      Thanks for sharing…

      Reply
    • Peter J

      They look impressive, well done :D

      Reply
      • Kiran Ruth R

        Thanks Peter :)

        Reply
    • Tuan

      I am using CSS3 for some buttons and other elements on my blog, it looks great. Hope all browsers will support it soon. :)

      Reply
      • Kiran Ruth R

        Yup :) … IE is the main culprit !!!

        Reply
    • rahul

      Thanks for tip. I will definitely use this on my blog :)

      Reply
      • neurowave

        Cool :)

        Reply

    Leave a Comment