Demo Button with CSS and HTML 5 Symbol for Blogger

Demo button is necessary for user. Because by watching demo visitor can easily understand the main feature and function of the widget. Specially some blog only share tutorial and widget code and demo button plays a vital role for giving a chance to viewer live widget. Everything is changing in Blogger and developers are designing varieties of items by different coding. So I have designed a little bit unique Live Demo button widget which is really attractive. Generally the main code based of CSS but I have added HTML 5 symbol to make the demo button more attractive. And when any user mouse over on demo button then whole screen will become dark transparent.

Live Demo

Here I am going to share 5 color demo button and you can easily change the color to make your own demo button for Blogger template. So please follow the below steps to add live Demo button in Blogger template.

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on Now click on -> Template -> Edit HTML

Step 3 Now find the </b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)

Step 4 Copy the code from below and Paste the code above/before </b:skin>

Code for Blue Demo Button

.nildemo {
width: 110px;
height: 25px;
background: #32A8FE;
border-radius:2px;
-moz-border-radius:2px ;
-webkit-border-radius:2px ;
text-align: center;
padding-top: 5px;
-webkit-transition:-webkit-box-shadow .5s ease;
-moz-transition:-webkit-box-shadow .5s ease;
-ms-transition:-webkit-box-shadow .5s ease;
-o-transition:-webkit-box-shadow .5s ease;
transition:-webkit-box-shadow .5s ease;
margin:auto;
}
.nildemo:hover {
background: #46AFFC;
-webkit-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-moz-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-ms-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-o-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
box-shadow:0 0 0 9999px rgba(0,0,0,.4);
position:relative;
z-index:99999;
}
.nildemo a {
color: #333;
text-decoration: none;
font: normal 16px Arial, Verdana;
text-align: center;
}

How to Use?

In new Post choose HTML mode instead of Compose the Paste the code from below

<div class="nildemo"><a href="DEMO URL HERE" target="blank" rel="nofollow">☰ Live Demo</a></div>

Customization

Replace DEMO URL HERE with your demo link.

Step 4 Copy the code from below and Paste the code above/before </b:skin>

Code for Green Demo Button

.sobojdemo {
width: 110px;
height: 25px;
background: #9dea4f;
border-radius:2px;
-moz-border-radius:2px ;
-webkit-border-radius:2px ;
text-align: center;
padding-top: 5px;
-webkit-transition:-webkit-box-shadow .5s ease;
-moz-transition:-webkit-box-shadow .5s ease;
-ms-transition:-webkit-box-shadow .5s ease;
-o-transition:-webkit-box-shadow .5s ease;
transition:-webkit-box-shadow .5s ease;
margin:auto;
}
.sobojdemo:hover {
background: #BBFD12;
-webkit-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-moz-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-ms-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-o-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
box-shadow:0 0 0 9999px rgba(0,0,0,.4);
position:relative;
z-index:99999;
}
.sobojdemo a {
color: #333;
text-decoration: none;
font: normal 16px Arial, Verdana;
text-align: center;
}

How to Use?

In new Post choose HTML mode instead of Compose the Paste the code from below

<div class="sobojdemo"><a href="DEMO URL HERE" target="blank" rel="nofollow">☰ Live Demo</a></div>

Customization

Replace DEMO URL HERE with your demo link.

Step 4 Copy the code from below and Paste the code above/before </b:skin>

Code for Red Demo Button

.laldemo {
width: 110px;
height: 25px;
background: #FE324A;
border-radius:2px;
-moz-border-radius:2px ;
-webkit-border-radius:2px ;
text-align: center;
padding-top: 5px;
-webkit-transition:-webkit-box-shadow .5s ease;
-moz-transition:-webkit-box-shadow .5s ease;
-ms-transition:-webkit-box-shadow .5s ease;
-o-transition:-webkit-box-shadow .5s ease;
transition:-webkit-box-shadow .5s ease;
margin:auto;
}
.laldemo:hover {
background: #FB455A;
-webkit-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-moz-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-ms-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-o-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
box-shadow:0 0 0 9999px rgba(0,0,0,.4);
position:relative;
z-index:99999;
}
.laldemo a {
color: #333;
text-decoration: none;
font: normal 16px Arial, Verdana;
text-align: center;
}

How to Use?

In new Post choose HTML mode instead of Compose the Paste the code from below

<div class="laldemo"><a href="DEMO URL HERE" target="blank" rel="nofollow">☰ Live Demo</a></div>

Customization

Replace DEMO URL HERE with your demo link.

Step 4 Copy the code from below and Paste the code above/before </b:skin>

Code for Purple Demo Button

.begonidemo {
width: 110px;
height: 25px;
background: #9232FE;
border-radius:2px;
-moz-border-radius:2px ;
-webkit-border-radius:2px ;
text-align: center;
padding-top: 5px;
-webkit-transition:-webkit-box-shadow .5s ease;
-moz-transition:-webkit-box-shadow .5s ease;
-ms-transition:-webkit-box-shadow .5s ease;
-o-transition:-webkit-box-shadow .5s ease;
transition:-webkit-box-shadow .5s ease;
margin:auto;
}
.begonidemo:hover {
background: #9E49FD;
-webkit-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-moz-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-ms-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-o-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
box-shadow:0 0 0 9999px rgba(0,0,0,.4);
position:relative;
z-index:99999;
}
.begonidemo a {
color: #333;
text-decoration: none;
font: normal 16px Arial, Verdana;
text-align: center;
}

How to Use?

In new Post choose HTML mode instead of Compose the Paste the code from below

<div class="begonidemo"><a href="DEMO URL HERE" target="blank" rel="nofollow">☰ Live Demo</a></div>

Customization

Replace DEMO URL HERE with your demo link.

Step 4 Copy the code from below and Paste the code above/before </b:skin>

Code for Yellow Demo Button

.holoddemo {
width: 110px;
height: 25px;
background: #F2FE32;
border-radius:2px;
-moz-border-radius:2px ;
-webkit-border-radius:2px ;
text-align: center;
padding-top: 5px;
-webkit-transition:-webkit-box-shadow .5s ease;
-moz-transition:-webkit-box-shadow .5s ease;
-ms-transition:-webkit-box-shadow .5s ease;
-o-transition:-webkit-box-shadow .5s ease;
transition:-webkit-box-shadow .5s ease;
margin:auto;
}
.holoddemo:hover {
background: #FAFD03;
-webkit-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-moz-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-ms-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-o-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
box-shadow:0 0 0 9999px rgba(0,0,0,.4);
position:relative;
z-index:99999;
}
.holoddemo a {
color: #333;
text-decoration: none;
font: normal 16px Arial, Verdana;
text-align: center;
}

How to Use?

In new Post choose HTML mode instead of Compose the Paste the code from below

<div class="holoddemo"><a href="DEMO URL HERE" target="blank" rel="nofollow">☰ Live Demo</a></div>

Customization

Replace DEMO URL HERE with your demo link.

Hope you would like this demo button. If you have any query regarding this then feel free to write me.

3 comments

Anonymous 12/29/2016 08:47:00 AM

Superb i really enjoyed very much with this article here. Really its a amazing article i had ever read. I hope it will help a lot for all. Thank you so much for this amazing posts and please keep update like this excellent article.he has a good point school signs uk
- BloggerSpice 12/30/2016 05:11:00 PM
  
  Thanks Jessica for your feedback... ;)

BloggerSpice: SEO and Money Making Strategies

Search this blog

Demo Button with CSS and HTML 5 Symbol for Blogger

How to Use?

Customization

How to Use?

Customization

How to Use?

Customization

How to Use?

Customization

How to Use?

Customization

3 comments

Float AdSense And Display Ad Banner on Left or Right Side of Your Blog

15 Hot SEO Google Chrome Extensions for Website Traffic, Clicks, and Rank Analysis

30+ Blogging Resources You need to know to Improve your Blog

How to Resolve Bengali Font Issues in Google Chrome: A Comprehensive Guide

How to Create a Password Protected Page in Blogger?