Add a Pure Professional CSS Live Demo Button in Blogger

Buttons and Icons also very important for any blog be'coz they shows the specially of and good look of any blog, if your buttons is very good looking and give a feel of professionalism to any blog and if your buttons are good looking and different to others then it can be good for your blog. That's why our team introducing the new and pure CSS button for blogger. 

Live Demo

Add Pure and Professional Button

• Login to Blogger > Dashborad
• Click on Drop Down Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML > Proceed > Expand Widget Templates
• Press Ctrl + F and search the code shown below.

</head>

• Paste below code before </head>

<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'></link>

• Now again find below code

]]></b:skin>

• Paste below code before ]]></b:skin>

#wg-dbutton {
border:2px solid black;
-moz-border-radius:6px;
-webkit-border-radius:6px;
background:#F8F8F8;
box-shadow:3px 3px 3px #434343;
width:130px;
margin-bottom:5px;
padding:5px;
}

#wg-dbutton a {
color:#434343;
background:#F8F8F8;
display:inline-block;
font-size:32px;
font-family: 'Yanone Kaffeesatz';
line-height:20px;
text-decoration:none;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
padding:8px 14px;
}

#wg-dbutton a:hover {
color:#fff;
text-shadow:0 1px 0 #000;
background:#434343;
text-decoration:none;
}

• Save Your Template

How to Add it in Post....?

• Go to posting area > HTML
• Now paste code in it.

<div id="wg-dbutton"><a href="#" target="_blank"><b>Live Demo</b></a></div>

Make Changes...!

• Replace # it with your link.

If Any Problem Comes, Ask in Comments