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 :)

Post a Comment

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

    ReplyDelete
    Replies
    1. đồng tâm
      game mu
      cho thuê nhà trọ
      cho thuê phòng trọ
      nhac san cuc manh
      số điện thoại tư vấn pháp luật miễn phí
      văn phòng luật
      tổng đài tư vấn pháp luật
      dịch vụ thành lập công ty trọn gói
      http://we-cooking.com/
      chém gió

      Đám người Nhạc Thành đang đi trên đường, nghe được mọi người đàm luận về Hồ điệp cốc cốc chủ tương lai, chuyện tình tam đại thần nữ muốn chọn phu quân, hỏi thăm một lúc, Nhạc Thành mới hiểu.

      Hồ điệp cốc hơn mười năm tuyển một lần cốc chủ, cốc chủ ở Hồ điệp cốc do tam đại thần nữ tuyển ra, mà ở cốc chủ chính thức lại chọn lựa ra một vị phu quân, mà vị có thể trở thành Hồ điệp cốc cốc chủ phu quân tương lai, điều kiện không thể tu luyện đầu khí mới được, cũng không thể là luyện dược sư cùng luyện khí sư, chọn lựa này của Hồ điệp cốc rất là nghiêm khắc.

      - Thật sự là trời cũng giúp ta, trước hết trà trộn vào rồi nói sau.

      Nhạc Thành khóe miệng mỉm cười, nghe nói tất cả người của Hồ điệp cốc đều là nữ nhân, hắn đang lo không có cách nào khác tiến vào Hồ điệp cốc, hiện tại cơ hội đến như vậy, chính mình nhất định phải trà trộn vào mới được.

      - Thanh Bối, Ma Ưng, chúng ta trước hết đi tới hồ đảo kia.

      Nhạc Thành nhìn Thanh Bối ma ngưu, Tứ sí ma ưng, bốn đầu ma lang nói.

      - Chọn lựa phế tài sao, điều này tựa hồ rất đơn giản.

      Delete
  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. This comment has been removed by a blog administrator.

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

    ReplyDelete
  10. This comment has been removed by the author.

    ReplyDelete
  11. How beautiful those button are!!! It makes our blog wonderful. Thanks for creating CSS3 button. I have to sharing a site for student. Click this site essay writing service and know more.

    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

 
Top