Sweet CSS3 Bon Bon Buttons For Blogger - Helper Blogger

Blogger Widgets | Templates | Tutorials


Saturday, 5 May 2012

Sweet CSS3 Bon Bon Buttons For Blogger

Cascading Style Sheet (CSS) is a heart of every web designer.We can't imagine that,what can a professional web designer create with using CSS3.Just watched another magic CSS3 - the Bon Bon buttons,in the first view I really impressed from that buttons.And I shocked when I know that these buttons are created with using pure CSS3.The biggest advantage of these buttons is they are made from pure CSS3  that means no any load on your website/blog.Also you can implement these buttons in your blog very easily,just follow my below steps carefully to add these sweet CSS3 buttons to your blog.


How To Add Bon Bon Buttons To Blogger Blog?

  1. Go to Blogger Dashboard > Design > Edit HTML.
  2. As always download a copy of your template.
  3. Now search for below code in your template (Tip - Use CTRL+F function)


Add below code just above/before of above code.

<link rel="stylesheet" type="text/css" href="http://helperblogger.ucoz.com/css/bon-bon-buttons.css"/>

Now save your template and you are done.Lets see how to use them in your posts...

How To Use These Buttons In Posts?

While creating post click on Edit HTML tab in your post editor.

Now use below code to use these buttons in your posts

<a href="YOUR LINK HERE" class="button">YOUR TEXT HERE</a>

Now replace YOUR LINK HERE with your link and YOUR TEXT HERE with your text.

This is for the only one type of button you can know more about these buttons here.


  1. well, it looks awesome but it does not work on my blog
    i have used this button code here in this post

    it shows the button in right side as i haven't aligned it, i tried to align it in left but it does not move.

  2. Your template designer(Prayag) has already putted the button code in your template and they are matching with my code that's why you are getting this error.If you want to use these buttons then you have to remove your old codes.

  3. thanks for the reply, please guide me to remove previous button from my template. i wanna give these buttons a try.

  4. if i want just use one of this how i can get here link?

  5. use below code

    <a href="YOUR LINK HERE" class="button">YOUR TEXT HERE</a>

    replace YOUR LINK HERE with your link and replace YOR TEXT HERE with the text which you want to appear on button.

  6. A woman takes a lot of pride in her breasts, because they help her to feel naturally beautiful and stylish as a grown woman. Triactol is a breast enhancement serum that acts on the tissues surrounding your breast and gives them a younger appearance. Large, firm, perfect and perky breasts that give a natural look are the dream of every woman. There are different methods used for the breast enlargement. Triactol bust enhancement serum has gained a larger number of fans on the market and the demand for its use is constantly growing. Triactol serum renders outstanding and guaranteed results and offers you a 60 days money back guarantee as well. No other breast enhancement cream or any such product offers this kind of guarantee to the users. Triactol works by increasing breast tissues. In order to make breasts naturally larger and perkier, the growth of the tissues are being controlled the natural way. Throughout any Triactol review, you will notice that there are more then plenty of benefits from using this serum, because it is natural and it provide the scouted results. Triactol serum utilizes quality grown bright pueraria mirifica, which functions the most efficient. Triactol is the kind of effective serum that can make your bust size grow and grow, seemingly all on their own. Sure, the process will be a little bit more drawn out than a nip and tuck, but you’ll be protecting your future health while also improving your appearance. This is the kind of solution that you can count on, and a very real reason to buy Triactol, For more review about TriactolBust Serum, Visit http://www.triactolplus.com

  7. Provillus is rated hair loss product of the year for men and women hair loss! Provillus is FDA approved solution to stop hair loss and regrow hair back! Read Provillus review before order at www.managehairloss.com

  8. I just found Review on Adiphene, Triactol, Provillus and ZetaClear, Phen375, Garcinia Cambogia Select and Acai Plus with Detox Plus Today, so thought it would be great piece of information to share!


If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account). PLEASE DO NOT SPAM