Add Beautiful CSS Buttons for Your Blogger Blog


Best Commentator: Apple iPhone 7 Plus (256 GB) WINNER: Michalina Logan
To claim your prize, please send us an email.


Beautiful CSS buttons for Your Blogger Blog
Today in this blogger tutorial we are gonna add cool CSS button with mouse hover effect to your blogger blog. These buttons are made from pure CSS and on mouse hover the color of this buutons changes with a light shadow effect. So I think its beautiful and each button has different colors. These buttons are for home, demo and download. You can also change the text to display with your text.



demo icon .png Wanna see a Demo Image
You can see the demo image which I have taken from my demo blog. This is in a GIF format. See below ▼ image 


CSS buttons for blogger blog

How to create calendar style dates in Blogger 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 ▼

]]></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

<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

<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

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