5 Stylish CSS Demo Button For Blogger

In this post we will learn how to add stylish css3 demo button in blogger blog to make your blog more beautiful use these buttons in your blog we are know button and i con are also very important for blog because they show beauty of any blog we often want to show a demo a what we are going to show in your tutorial so we can use these stylish css3 demo buttons to give demo our readers if your button is very good looking and different from other blog then it’s better for your blog so toady I’m here with stylish css3 demo button with attractive hover effect you can add these buttons in your post where you want to show demo button you can add this stylish css demo button in your blog easily

]]></b:skin>

Now there are few demo button css choose any one css which one style want show in your blog

Style 1:

/*— Demo Buttons By Nafisflahi.com— */
.NF-livedemo{
cursor:pointer;
font-weight:bold;
line-height:1;
ole;
font-size:17px;
padding:8px 19px 9px;
position:relative;
text-decoration:none;
text-shadow:0 -1px 1px rgbaundefined0, 0, 0, 0.25);
-moz-border-radius:5px 5px 5px 5px;
-webkit-bor-dius:5px 5px 5px 5px;
cursor:pointer;border-radius:5px 5px 5px 5px;
color:#Fff;-moz-box-shadow:0 1px 3px rgbaundefined0, 0, 0, 0.25);
-webkit-box-shadow:0 1px 3px rgbaundefined0, 0, 0, 0.25);
box-shadow:0 1px 3px rgbaundefined0, 0, 0, 0.25);
background:#B20000; repeat-x scroll 0 0 #222222;
border-:1px solid rgbaundefined0, 0, 0, 0.25);
color:#FFFFFF !important;
}

.NF-livedemo:hover{
background:#000000;
font:bold 17px sans-serif;
border:3px #BFE3FE;
-moz-box-shadow:0 1px 11px rgbaundefined0, 0, 0, 0.45);
-webkit-box-shadow:0 1px 11px rgbaundefined0, 0, 0, 0.45);
box-shadow:0 1px 11px rgbaundefined0, 0, 0, 0.45);
}

Style 2:

/*— Demo Buttons By Nafisflahi.com— */
.NF-livedemo {
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:0px 5px 0px 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:#AA80FE; repeat-x scroll 0 0 #24006B;
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;
}
.NF-livedemo {
background-position: center;
background: #24006B;
font-size: 15px;
border: 1px dashed #111;
box-shadow: 0 0 0 4px #f6701d, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
text-align:center;
width:150px;
}
.NF-livedemo:hover {
background-color:#AA80FE;
}
.NF-livedemo:active {
background-color:#B25900;
}
.NF-livedemo: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);
border-radius:5px 0px 5px 0px;
filter:alpha(opacity=10); /* For IE8 and earlier */
left: 0;-webkit-transition: .2s ease-in;
-moz-transition: .2s ease-in;
-o-transition: .2s ease-in;
transition: .2s ease-in;
}

Style 3:

/*— Demo Buttons By Nafisflahi.com— */
.NF-livedemo{
cursor:pointer;
font-weight:bold;
line-height:1;
ole;
font-size:17px;
padding:8px 19px 9px;
position:relative;
text-decoration:none;
text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);
-moz-border-radius:5px 5px 5px 5px;
-webkit-bor-dius:5px 5px 5px 5px;
cursor:pointer;border-radius:5px 5px 5px 5px;
color:#Fff;-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:#B20000; repeat-x scroll 0 0 #222222;
border-:1px solid rgba(0, 0, 0, 0.25);
color:#FFFFFF !important;
}

.NF-livedemo:hover{
background:#000000;
font:bold 17px sans-serif;
border:3px #BFE3FE;
-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);
}

Style 4:

/*— Demo Buttons By Nafisflahi.com— */
.NF-livedemo{
background:#EB7F17;
text-align:center;
cursor:pointer;
color:#fff;
margin:8px 0;
border:none;
padding:8px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 17px sans-serif;
}
.NF-livedemo:hover{
background:#FFB93C;
}
.NF-livedemo a {
color:#fff;
text-decoration:none;
}

.NF-livedemo a:hover {
color:#fff;
text-decoration:none;
}

Style 5:

/*— Demo Buttons By Nafisflahi.com— */
.NF-livedemo {
border-bottom: #B24700 5px solid;
border-left: #B24700 5px solid;
padding-bottom: 6px; padding-left: 5px;
padding-right: 6px;
border-top: #B24700 5px solid;
border-right: #B24700 5px solid;
padding-top: 6px;
border-radius: 5px;
width: 80px;
-moz-border-radius: 5px;
}

Now add this code where you want to show demo button

<div class=”NF-livedemo” href=”#”
target=”_blank”>Live Demo</div>

• Now change # with your link
• Change  Live Demo with your own text