How to add new and Stylish Demo and Download button with mouse hover effect - If you have a template blog and you are looking for a demo and download button for your blog, then you are at the right place. Because today, with the help of this article I'm going to share with you a new and stylish demo and download button for your blog which comes with mouse hover effect.
If you want to see the demo of this buttons, then scroll down this page at the bottom.
For those who want to add this buttons on their own blog, simply follow the below simple steps.
How to add?
At the first, visit to the blogger dashboard - Visit
Go to the "Template" section.
Click on the "Edit Html" button.
Now add any one "Style Css" code in your template just before ]]></b:skin> or </style>.
/* CSS Button Style 1 by indzign.blogspot.com */
.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button ul{margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none}
.button li a.demo,.button li a.download{position:relative;padding:9px 48px 9px 16px;background:#f39c12;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}
.button li a.download{background:#3498db}
.button li a.demo:hover,.button li a.download:hover{background:#666}
.button li a.demo:active,.button li a.download:active{cursor:pointer}
.button li a.demo:after,.button li a.download:after{content:'\f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:11px;font-family:fontawesome}
.button li a.download:after{content:'\f019'}
<----->OR<----->
/* CSS Button Style 2 by indzign.blogspot.com */
.button2{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button2 ul{margin:0;padding:0}
.button2 li{display:inline;margin:5px;padding:0;list-style:none}
.button2 li a.demo,.button2 li a.download{position:relative;padding:14px 48px 14px 16px;background:#f39c12;display:block;color:#fff!important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden}
.button2 li a.download{background:#3498db}
.button2 li a.demo:hover,.button2 li a.download:hover{background:#666}
.button2 li a.demo:active,.button2 li a.download:active{cursor:pointer}
.button2 li a.demo:after,.button2 li a.download:after{content:'\F054';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px 24px;font-family:fontawesome;transition:all .3s}
.button2 li:hover a.demo:after,.button2 li:hover a.download:after{background:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}
Save your template.
After that, add any one HTML code while making a post in HTML mode.
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://askwithloud.blogspot.com" target="_blank">Demo</a></li>
<li><a class="download" href="http://askwithloud.blogspot.com" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>
<----->OR<----->
<div style="text-align: center;">
<ul class="button2">
<li><a class="demo" href="http://askwithloud.blogspot.com" target="_blank">Demo Link</a></li>
<li><a class="download" href="http://askwithloud.blogspot.com" target="_blank">Download Link</a></li>
</ul>
</div>
<div class="clear"></div>
Note- Replace the above highlighted URL with your own URL.
STYLE 1
STYLE 2
That's it! I hope you like this buttons! Stay tuned for more cool buttons like this! Thanks for reading +Prince Chaudhri
0 Comment to "2 Stylish Css Demo Download Button For Blogger"
Post a Comment