Beautiful CSS3 Buttons For Blogger - Helper Blogger

Blogger Widgets | Templates | Tutorials

Latest

Wednesday, 11 July 2012

Beautiful CSS3 Buttons For Blogger


After sharing bon bon buttons for blogger this time we are sharing another cool CSS3 buttons set.This button set contains buttons of 6 different colors (pink,green,blue,red,orange and yellow) and 2 sizes (large and medium).It is designed by papermashup and I have reshared it on helperblogger for my readers.You can add these buttons in 2 steps into your blog,also the usage of the buttons are damn easy.Now lets go to the the tutorial and see how to add them and use them.

Live Buttons Demo ↓



How To Add These Buttons To Blogger?

First we will add CSS code and then we will see the HTML part i.e. how to use them.

  1. Go to Blogger Dashboard > Template
  2. Click on Edit HTML
  3. Hit Proceed button
  4. Find below code in your template

]]></b:skin>


add below code just above it,

.button, .button:visited {
 background: #222 url(http://helperblogger.googlecode.com/svn/overlay.png) repeat-x;
 display: inline-block;
 padding: 5px 10px 6px;
 color: #fff;
 text-decoration: none;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
 border-bottom: 1px solid rgba(0,0,0,0.25);
 position: relative;
 cursor: pointer;
 font-family: calibri;
}

.button:hover {
 background-color: #111;
 color: #fff;
}

.button:active {
 top: 1px;
}

.small.button, .small.button:visited {
 font-size: 11px
}

.button, .button:visited,
.medium.button, .medium.button:visited {
 font-size: 13px;
 font-weight: bold;
 line-height: 1;
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}

.medium.button, .medium.button:visited {
 font-size: 14px;
 padding: 8px 14px 9px;
}

.large.button, .large.button:visited {
 font-size: 34px;
 padding: 8px 14px 9px;
}

.pink.button, .magenta.button:visited {
 background-color: #e22092;
}

.pink.button:hover {
 background-color: #c81e82;
}

.green.button, .green.button:visited {
 background-color: #91bd09;
}

.green.button:hover {
 background-color: #749a02;
}

.red.button, .red.button:visited {
 background-color: #e62727;
}

.red.button:hover {
 background-color: #cf2525;
}

.orange.button, .orange.button:visited {
 background-color: #ff5c00;
}

.orange.button:hover {
 background-color: #d45500;
}

.blue.button, .blue.button:visited {
 background-color: #2981e4;
}

.blue.button:hover {
 background-color: #2575cf;
}

.yellow.button, .yellow.button:visited {
 background-color: #ffb515;
}

.yellow.button:hover {
 background-color: #fc9200;
}


Save your template.

Now you have added the styles of buttons into your blog,lets see how to use them.

How To Use These Buttons?


These buttons are very easy to use,below I am giving HTML Code of all types of button.Follow below simple steps to use them while writing posts,


  1. While editing post click on Edit HTML tab
  2. Choose your button code below and paste it
  3. Replace links and link names with yours,


1. HTML Code Large Buttons -

<center><a href="LINK HERE" class="large button pink" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button blue" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button green" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button orange" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button red" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button yellow" >LINK TEXT HERE</a></center>


2. HTML Code Medium Buttons -


<center><a href="LINK HERE" class="medium button pink" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button blue" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button green" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button orange" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button red" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button yellow" >LINK TEXT HERE</a></center>

  • Replace LINK HERE with link URL
  • Replace LINK TEXT HERE with the text which you want to appear on the button.

Hope you have enjoyed this buttons :) Good Day :)

12 comments:

  1. its nice. i gave a backlink to your blog: visit my blog: http://www.labstrikes.blogspot.com/

    ReplyDelete
  2. very nice sharing. thanks
    http://premium-area.blogspot.com

    ReplyDelete
  3. previously i used your bubble buttons but i think i will be switching over to these buttons !!

    http://www.yourpcgenie.blogspot.com

    ReplyDelete
  4. good post
    www.techtricksmania.tk

    ReplyDelete
  5. I implemented them on my blog. I just hope it works well.
    Thanks for these buttons because they are important for my tech blog.

    ReplyDelete
  6. nice dude...very great post,.
    visit my blog:
    Funniest Meme Pinoy Version

    ReplyDelete
  7. Good post
    http://thetrickslab.com

    ReplyDelete
  8. Good Post I like it http://www.hamidehsan97.blogspot.com

    ReplyDelete
  9. Thank you so much brother good information

    ReplyDelete

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