Demo Button with CSS and HTML 5 Symbol for Blogger

Demo Button with CSS and HTML 5 Symbol for Blogger
demo button

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> 

blue demo
  • 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

HTML code

<div class="nildemo"><a href="DEMO URL HERE" target="blank" rel="nofollow">&#9776; 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> 

green demo
  • 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">&#9776; 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> 

red demo
  • 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">&#9776; 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> 

purple button
  • 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">&#9776; 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> 

yellow demo
  • 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">&#9776; 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. 
Go Up