Demo Button with CSS and HTML 5 Symbol for Blogger

Demo Button with CSS and HTML 5 Symbol for Blogger

2
data:blog.title
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. 
Demo Button with CSS and HTML 5 Symbol for Blogger
4 Stars stars - "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 ...

Super Post .

স্যার 3D Mug টেম্পলেটের ব্যাকগ্রাউন্ড ফটো টা ডিলিট করে দিয়ে শুধু ব্লগ থাকবে । এটা কিভাবে করবো ?
http://i.picasion.com/pic79/d99cd9376400c3038f9a2f1cfeaee745.gif

nicer code gola remove koro..taholei cloud gola remove hoye jabe.

#cover-cloud{height:200px;left:0;min-width:1074px;position:absolute;width:100%;z-index:0}#cloud{background:url(http://2.bp.blogspot.com/-pIdaj5t_YMg/T4asjeHwrJI/AAAAAAAADPo/1jFK0WRW4Z0/s1600/cloud1.png) repeat-x 0 0;height:188px;position:absolute;width:100%;z-index:1}#cloud2{background:url(http://4.bp.blogspot.com/-1LiwOdGfsag/T4afsRPasQI/AAAAAAAADPI/rP6G5TP0ky8/s1600/cloud2.png) repeat-x 0 0;height:125px;position:absolute;width:100%;z-index:2}#cloud3{background:url(http://3.bp.blogspot.com/-D1UZFZTfMMo/T4afst6IauI/AAAAAAAADPU/zzTOtV0P-40/s1600/cloud3.png) repeat-x 0 0;height:46px;position:absolute;width:100%;z-index:3}

r Ami ekta Bangla site khulci.. Icca korle ooikhane article post korte parba...

http://www.bdarena.com/

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *