Nov 14, 2015

How To Add Beautiful CSS Buttons to Blogger

Yesterday I was just randomly seeing some Pure CSS3 buttons and think why I've not share any Pure CSS Buttons with my blog readers. So yester night I've done coding for Pure CSS Buttons for Blogger Blog. These button is made up of Pure CSS3 i.e. without the usage of any Images or JavaScript.

Our Recommended Blogger Widgets

  1. WordPress Like Floating Social Sharing Widget for Blogger with Counter.
  2. AllInOne Admin Box Widget with Social buttons and Subscription Box.
  3. Add Sticky Notification Bar To Blogger with Show/Hide Button.
  4. Stylish Contact Form For Blogger! Add to Static Page, Responsive & Pro Version.
  5. Cute & Stylish Email Popup Subscription Widget.

This button set contains buttons of 6 different colors (pink, green, blue, red, orange and yellow) and 2 sizes (large and medium). This button may be really helpful for game/software download blogs. So a live working demo of this buttons, you can see from demo link which is given below. 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.


Add Beautiful CSS3 Buttons For Blogger

How To Add CSS Buttons To Blogger?

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

.button, .button:visited {
 background: #222 url( 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;
6. Save your template.

7. That's it. 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,

HTML Coding For Large Buttons

HTML Coding For Medium Buttons

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


So above Guide is about How to Add and Use Pure CSS3 Buttons in Blogger Blog. Hope by above tutorial you can easily add these on your blog. If anyhow problem persist after following all steps then ask us by dropping a comment below. We will help you out of sure. Do Share On Blogging Communities.

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.