• X

    How To Make Buttons In Your Site Look Sexier

    By in Design

    Bluehost hosting

    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 How To Make Buttons In Your Site Look Sexier

     

    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 .

    Get Free Blogging updates in your Email

    Find more Topics based on Keywords

    Article by

    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… read them below or add one }

    rahul

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

    Reply

    neurowave

    Cool :)

    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

    Peter J

    They look impressive, well done :D

    Reply

    Kiran Ruth R

    Thanks Peter :)

    Reply

    Anup @ Hack Tutors

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

    Thanks for sharing…

    Reply

    tushar

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

    Reply

    Sagar Rai

    It was really cool buttons

    Reply

    Johny

    those are really sexy

    Reply

    Sathish @ TechieMania

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

    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

    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

    Leave a Comment

    Previous post:

    Next post:

    `