Spice Up Your Blogger Blog with Custom Designed Templates - BTNT Services!

DIY Buttons Pack - Free CSS3 Buttons For Blogger

On By // 17 comments
Advertisement
css3 buttons for blogger
Hi Friends, Today I have to release the DIY buttons pack for blogger Which is converted from DIY buttons. The Wordpress version of this button was created by alex from kolakube.com.

The great thing about these buttons (besides their looks) is they were created with CSS3, the newest iteration of the CSS coding language. This means, any of these buttons are easy to customize.

Even if you have a limited understanding of how CSS works, changing the colors and styles of any of these buttons is a breeze.

The wordpress buttons have 30 buttons but here we have only 24 buttons because the last six buttons works with the web symbols regular font which does not support blogger So, Here You can add 24 DIY buttons to your blogger blog. Lets see how to add these buttons to your blog.

Add DIY buttons to Your blogger blog

Adding CSS code

Old Dashboard
  1. Go to Blogger Dashboard > Design tab > Edit HTML tab
  2. Now search for ]]></b:skin>
  3. Above that place the css code given below of each Demo.
    Note:- Just Add the css code for the specific button which you want to Add.
  4. Now save your template.
New Dashboard
  1. On New Blogger Dashboard Go to Template > Edit HTML Button
  2. Ignore the Warning and Click the Proceed button
  3. Now search for ]]></b:skin>
  4. Above that place the css code given below of each Demo.
    Note:- Just Add the css code for the specific button which you want to Add.
  5. Now save your template.

Adding button to your blog:-

  • Just copy the html code given below and paste it where you want to add the button.

Standard Buttons

Red ButtonOrange ButtonGreen ButtonBlue ButtonGray ButtonDark Button
css3 code for standard buttons
/* Standard Buttons */
a.standard { border: 1px solid rgba(0, 0, 0, .2); color: #fff; display: inline-block; padding: .5em .8em; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }

.standard.red { background: #c60000; background: linear-gradient(top, #c60000 0%, #b20000 100%); background: -moz-linear-gradient(top, #c60000 0%, #b20000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c60000), color-stop(100%, #b20000)); background: -webkit-linear-gradient(top, #c60000 0%, #b20000 100%); }

.standard.orange { background: #f99015; background: linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -moz-linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f99015), color-stop(100%,#f76c0f)); background: -webkit-linear-gradient(top, #f99015 0%,#f76c0f 100%); }

.standard.green { background: #30a146; background: linear-gradient(top, #30a146 0%, #249334 100%); background: -moz-linear-gradient(top, #30a146 0%, #249334 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334)); background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%); }

.standard.blue { background: #16a4c8; background: linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -moz-linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #16a4c8), color-stop(100%, #1086b6)); background: -webkit-linear-gradient(top, #16a4c8 0%, #1086b6 100%); }

.standard.gray { background: #c2c2c2; background: linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -moz-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c2c2c2), color-stop(100%, #aeaeae)); background: -webkit-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); }

.standard.dark { background: #464646; background: linear-gradient(top, #464646 0%, #343434 100%); background: -moz-linear-gradient(top, #464646 0%, #343434 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #464646), color-stop(100%, #343434)); background: -webkit-linear-gradient(top, #464646 0%, #343434 100%); }

a.standard:hover { color: #fff; opacity: .5 }
html code for standard buttons
<a href="http://www.YOUR-LINK-HERE.com/" class="standard red">Red Button</a>

<a href="http://www.YOUR-LINK-HERE.com/" class="standard orange">Orange Button</a>

<a href="http://www.YOUR-LINK-HERE.com/" class="standard green">Green Button</a>

<a href="http://www.YOUR-LINK-HERE.com/" class="standard blue">Blue Button</a>

<a href="http://www.YOUR-LINK-HERE.com/" class="standard gray">Gray Button</a>

<a href="http://www.YOUR-LINK-HERE.com/" class="standard dark">Dark Button</a>


Arrow Buttons

Red Arrow ButtonOrange Arrow ButtonGreen Arrow ButtonBlue Arrow ButtonGray Arrow ButtonDark Arrow Button
css3 code for Arrow Buttons
/* Arrow Buttons */
a.arrow { background: url(http://i44.tinypic.com/6tmsu8.png) repeat-x top; border: 4px solid rgba(0, 0, 0, .1); color: #fff; display: inline-block; font-size: 1.1em; font-weight: bold; padding: .6em 1.2em; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
a.arrow.red { background-color: #b20000 }
a.arrow.orange { background-color: #f76c0f }
a.arrow.green { background-color: #248334 }
a.arrow.blue { background-color: #1086b6 }
a.arrow.gray { background-color: #aeaeae }
a.arrow.dark { background-color: #343434 }
a.arrow:hover { color: #fff; opacity: .5 }

html code for Arrow Buttons
<a class="arrow red" href="http://www.YOUR-LINK-HERE.com/">Red Arrow Button</a>

<a class="arrow orange" href="http://www.YOUR-LINK-HERE.com/">Orange Arrow Button</a>

<a class="arrow green" href="http://www.YOUR-LINK-HERE.com/">Green Arrow Button</a>

<a class="arrow blue" href="http://www.YOUR-LINK-HERE.com/">Blue Arrow Button</a>

<a class="arrow gray" href="http://www.YOUR-LINK-HERE.com/">Gray Arrow Button</a>

<a class="arrow dark" href="http://www.YOUR-LINK-HERE.com/">Dark Arrow Button</a>

Bevel Buttons

Red Bevel ButtonOrange Bevel ButtonGreen Bevel ButtonBlue Bevel ButtonGray Bevel ButtonDark Bevel Button
css3 code for Bevel Buttons
/* Bevel Buttons */
a.bevel { border-color: rgba(255, 255, 255, .2) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, .1) rgba(255, 255, 255, 0.2); border-style: solid; border-width: 3px; color: #fff; display: inline-block; padding: .5em .8em; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; }
a.bevel.red { background: #b20000 }
a.bevel { background: #f76c0f }
a.bevel.green { background: #248334 }
a.bevel.blue { background: #1086b6 }
a.bevel.gray { background: #aeaeae }
a.bevel.dark { background: #343434 }
.bevel:hover { color: #fff; opacity: .5 }
html code for Bevel Buttons
<a class="bevel red" href="http://www.YOUR-LINK-HERE.com/">Red Bevel Button</a>

<a class="bevel orange" href="http://www.YOUR-LINK-HERE.com/">Orange Bevel Button</a>

<a class="bevel green" href="http://www.YOUR-LINK-HERE.com/">Green Bevel Button</a>

<a class="bevel blue" href="http://www.YOUR-LINK-HERE.com/">Blue Bevel Button</a>

<a class="bevel gray" href="http://www.YOUR-LINK-HERE.com/">Gray Bevel Button</a>

<a class="bevel dark" href="http://www.YOUR-LINK-HERE.com/">Dark Bevel Button</a>

Engraved Buttons

Red Engraved ButtonOrange Engraved ButtonGreen Bevel ButtonBlue Engraved ButtonGray Engraved ButtonDark Engraved Button
css3 code for Engraved Buttons
/* Engraved Buttons */
.engraved { background: rgba(0, 0, 0, .08); display: inline-block; padding: 5px; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; }
.engraved a { color: #fff; border: 1px solid rgba(0, 0, 0, .3); display: inline-block; padding: .6em 1.2em; position: relative; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }

.engraved a.red { background: #c60000; background: linear-gradient(top, #c60000 0%, #b20000 100%); background: -moz-linear-gradient(top, #c60000 0%, #b20000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c60000), color-stop(100%, #b20000)); background: -webkit-linear-gradient(top, #c60000 0%, #b20000 100%); }

.engraved a.orange { background: #f99015; background: linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -moz-linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f99015), color-stop(100%,#f76c0f)); background: -webkit-linear-gradient(top, #f99015 0%,#f76c0f 100%); }

.engraved a.green { background: #30a146; background: linear-gradient(top, #30a146 0%, #249334 100%); background: -moz-linear-gradient(top, #30a146 0%, #249334 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334)); background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%); }

.engraved a.blue { background: #16a4c8; background: linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -moz-linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #16a4c8), color-stop(100%, #1086b6)); background: -webkit-linear-gradient(top, #16a4c8 0%, #1086b6 100%); }

.engraved a.gray { background: #c2c2c2; background: linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -moz-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c2c2c2), color-stop(100%, #aeaeae)); background: -webkit-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); }

.engraved a.dark { background: #464646; background: linear-gradient(top, #464646 0%, #343434 100%); background: -moz-linear-gradient(top, #464646 0%, #343434 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #464646), color-stop(100%, #343434)); background: -webkit-linear-gradient(top, #464646 0%, #343434 100%); }

.engraved a:hover, .engraved:hover { color: #fff; opacity: .5 }
html code for Engraved Buttons
<span class="engraved"><a class="red" href="http://www.YOUR-LINK-HERE.com/">Red Engraved Button</a></span>

<span class="engraved"><a class="orange" href="http://www.YOUR-LINK-HERE.com/">Orange Engraved Button</a></span>

<span class="engraved"><a class="green" href="http://www.YOUR-LINK-HERE.com/">Green Bevel Button</a></span>

<span class="engraved"><a class="blue" href="http://www.YOUR-LINK-HERE.com/">Blue Engraved Button</a></span>

<span class="engraved"><a class="gray" href="http://www.YOUR-LINK-HERE.com/">Gray Engraved Button</a></span>

<span class="engraved"><a class="dark" href="http://www.YOUR-LINK-HERE.com/">Dark Engraved Button</a></span>

I hope you like it. Please share your thoughts about these buttons on comment and Don't forget to share it. Thanks Guys. :)
Like This Post? Please share!
Subscribe to Blogtipsntricks by email and get Free updates

You May Also Like...

17 comments:

  1. My Blogger Club20 August 2012 at 10:15

    Really great work. i think so you are master in coding. But brother can you publish marketer delight 2 for blogger.

    ReplyDelete
    Replies
    1. Chandeep J20 August 2012 at 11:03

      Thanks Bro... I already started converting the marketers delight 2 for blogger. It will be published soon.

      Stay Tuned... :)

      Delete
    2. ARAVIND BALAJI27 November 2012 at 14:41

      Hey it seems you have released it already but why did you remove again? At least send the download link to me. PM me pls.

      Delete
    3. Chandeep J27 November 2012 at 15:14

      See This Announcement...

      http://www.blogtipsntricks.com/2012/11/reopening-our-blogger-resource-page.html

      I started converting MD2 But I dropped it before finishing it. :(

      you can try this theme. :)

      http://www.blogtipsntricks.com/2012/11/copyblogger-v2-responsive-blogger-template.html

      Delete
  2. Unknown3 November 2012 at 12:33

    how to reduce the size of the buttons

    ReplyDelete
  3. Chandeep J3 November 2012 at 12:46

    To reduce the Button size you have to reduce the font size of the button. To make it Just add the following code to the button CSS code.

    font-size: 80%;

    Now save your template.

    That's all. :)

    ReplyDelete
  4. Unknown5 November 2012 at 12:12

    Wat i have to do with html code??

    ReplyDelete
    Replies
    1. Chandeep J6 November 2012 at 07:26

      The HTML code will help to add the button as per your need.

      For example If you want to add a green color standard button the you have to add the following code where you want to show the button. Then replace YOUR-LINK-HERE with your link and Green Button with your button name like "download".

      <a href="http://www.YOUR-LINK-HERE.com/" class="standard green">Green Button</a>

      Now the green color standard button will be shown on your blog.

      That's all. :)

      Delete
    2. Unknown6 November 2012 at 12:45

      Im unable to get this buttons.. Can u explain the steps for red bevel alone.. can u send to my mail id ecegopinathgunasekaran@gmail.com..

      Delete
  5. Chandeep J6 November 2012 at 13:20

    To add the Red bevel buttons.

    Go to blogger template editor. Search for ]]></b:skin> and add the following code above it.

    /* Bevel Buttons */
    a.bevel { border-color: rgba(255, 255, 255, .2) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, .1) rgba(255, 255, 255, 0.2); border-style: solid; border-width: 3px; color: #fff; display: inline-block; padding: .5em .8em; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; }
    a.bevel.red { background: #b20000 }

    Now you have added the CSS part of the Red Bevel Button.

    Then, To show the red bevel button on your blog. Add the following HTML Code as per your wish

    <a class="bevel red" href="http://www.YOUR-LINK-HERE.com/">Red Bevel Button</a>

    For example. If you want it show it at the top of a specific post page. Then Go to the HTML Part of the specific post And add the HTML Code given above.

    NOTE:- Don't forget to change the "YOUR-LINK-HERE" with your link and "Red Bevel Button" With the name of your button i.e. Download

    That's all... you have finished. :)




    ReplyDelete
  6. Swapnil13 March 2013 at 08:39

    These are the great work of css thanks bro for making my blog look like professional.

    ReplyDelete
    Replies
    1. Blogger Awn987 April 2013 at 06:44

      adding code css button before ]]> or after ]]> ??
      please help

      Delete
    2. Chandeep J7 April 2013 at 12:38

      add the css button code before that

      Delete
    3. Blogger Awn988 April 2013 at 19:22

      thanks. Mr chan deep, where are you come from

      Delete
    4. Chandeep J8 April 2013 at 22:26

      I'm from Tamil Nadu,India.

      Delete

I Appreciate your valuable Feedback. So, Please DO NOT SPAM - Spam comments will be deleted immediately.

Don't use brand name in name field and you're not allowed to use links in comments unless it's necessary

Such Comments will be removed immediately.

Thanks,
Chandeep