5 Stylish CSS Demo Button For Blogger

css live deomo

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

Stylish CSS Demo Button

to add this stylish demo button your blogger follow these simple steps

  • Go blogger Dashboard
  • Click on the template
  • Backup your template
  • Click on the edit HTML
  • Now find the blow code to find it press CTR+F

 

]]></b:skin>

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

Style 1:

Demo Button

/*— 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:

Live demo

 

/*— 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:

Red Demo Button

/*— 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 button

 

/*— 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:

 

Simple demo button

/*— 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

Leave a Reply

Your email address will not be published. Required fields are marked *