How To Add Beautiful CSS Buttons to Blogger
Our Recommended Blogger Widgets
- WordPress Like Floating Social Sharing Widget for Blogger with Counter.
- AllInOne Admin Box Widget with Social buttons and Subscription Box.
- Add Sticky Notification Bar To Blogger with Show/Hide Button.
- Stylish Contact Form For Blogger! Add to Static Page, Responsive & Pro Version.
- 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.
How To Add CSS Buttons To Blogger?
- Go to Blogger Dashboard > Template
- Click on Edit HTML
- Hit Proceed button
- Find below code in your template
- Add below code just above it,
.button, .button:visited {
background: #222 url(http://lh3.googleusercontent.com/-90vk1BfL8DM/VkbvqfzVUXI/AAAAAAAAEOU/KruGRGqLFoM/h120/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;
}
6. Save your template.
How To Use These Buttons?
- While editing post click on Edit HTML tab
- Choose your button code below and paste it
- 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.
Conclusion:
Contents
