Ad Code

How to Add Beautiful CSS Buttons for Your Blogger Blog

June 29, 2016
Advertisements
How to add this buttons to your blog
These buttons are very easy to use. Now I would like to divide the instalation of this widgets into two parts, that's CSS part as well as HTML part. At first we can add the CSS code. Please follow the below steps.


  • Go to Blogger Dashboard > Template
  • Backup your Template before making any changes to your blog
  • Click on Edit HTML
  • Tick Expand Widget Templates
  • Press Ctrl + F and search the code shown below ▼


?
1
]]></b:skin>

Now add the below ▼ code just Above/Before ]]></b:skin> (use Ctrl+F to find the code)

.button {
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
background:scroll 0 0 #222222;
border-bottom:1px solid rgba(0, 0, 0, 0.25);
color:#FFFFFF !important;
cursor:pointer;
font-weight:bold;
line-height:1;
overflow:visible;
font-size:17px;
padding:8px 19px 9px;
position:relative;
text-decoration:none;
text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);
width:auto;
}
.demobutton {
background-color:#999999;
text-align:center;
width:100px;
}
.demobutton:hover {
background-color:#EB7D05;
}
.downloadbutton {
background-color:#999999;
text-align:center;
width:100px;
}
.downloadbutton:hover {
background-color:#00AC00;
}
.homebutton {
background-color:#999999;
text-align:center;
width:100px;
}
.homebutton:hover {
background-color:#1666DC;
}
.button:hover {
-moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
-webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
}
[You can change the button color and its mouse hover color by changing the html color code of above ▲ colored lines]

Now we have added the CSS (style) part in the template and let's see how to use them. Next I m giving HTML Code of all types of button according to their names. Just follow the below simple steps to use them while writing your blog post.

  • Switch your blog post from Compose to EDIT HTML while you writing post  
  • Select your button code below ▼ and paste it where you want to display buttons


Homepage Button

?
1
2
3
<a class="button homebutton" href="YOUR HOMEPAGE LINK HERE" rel="nofollow"
style="float: left;" target="_blank"><span style="display:
inline-block;">Homepage</span></a>

Live Demo Button

?
1
2
3
<a class="demobutton button" href="YOUR DEMO LINK HERE" rel="nofollow"
style="float: left;" target="_blank"><span style="display:
inline-block;">Live Demo</span></a>

Download button

?
1
2
3
<a class="button downloadbutton" href="YOUR DOWNLOAD LINK HERE"
rel="nofollow" style="float: left;" target="_blank"><span style="display:
inline-block;">Download</span></a>

css button for your blog post Please note the following things
Before you publish your blog post, please replace YOUR LINK HERE, with your Homepage link, Live Demo link and Download link. And you can also change the text to display with your text if you know a little bit about CSS and HTML. Happy blogging:)
Demo

Homepage Live Demo Next >
Download Link
Advertisements