How to Make a Demo Button with Color Gradients
1. Go to your blogger dashboard
2. Go to the Template menu and select Edit HTML
3. Copy the code below and Paste it above the code ]]></b:skin> or </style>.
/* CSS Button Style by thanhtuan.host */
.button2{width:90%;list-style:none;text-align:center;border:0;margin:10px 0;clear:both;text-decoration:none}
.button2 ul{margin:0;padding:0}
.button2 li{display:inline;margin:5px;padding:0;list-style:none}
.button2 li a.demo,.button2 li a.netridere,.button2 li a.premium{display:block;position:relative;padding:15px 48px 15px 16px;background:#f39c12,#3498db;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}
.button2 li a.netridere{background:#3498db,#f39c12}
.button2 li a.premium{background:#d234db,#f39c12}
.button2 li a.demo:hover,.button2 li a.netridere:hover,.button2 li a.premium:hover{background:#666}
.button2 li a.demo:active,.button2 li a.netridere:active,.button2 li a.premium:active{cursor:pointer}
.button2 li a.demo:after,.button2 li a.netridere:after,.button2 li a.premium: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:16px;font-family:fontawesome}
.button2 li a.netridere:after{content:'\f019'}
.button2 li a.premium:after{content:'\f155'}
.nqnia {
background: linear-gradient(45deg, #f22613, #f89406, #26a65b, #5868ec, #f54e80, #f7ca18, #d2527f);
background-size: 500% 500%;
-webkit-animation: mangotepGradient 12s ease infinite;
-moz-animation: mangotepGradient 12s ease infinite;
animation: mangotepGradient 12s ease infinite;
}
@-webkit-keyframes mangotepGradient {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes mangotepGradient {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes mangotepGradient {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
4. To use it, all you have to do is enter the HTML below every time you want to create a download button and demo in your article.
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
<div style="text-align: center;">
<ul class="button2">
<li><a class="demo nqnia" href="https://thanhtuan.host/" target="_blank">Link Demo</a></li>
<li><a class="netridere nqnia" href="https://thanhtuan.host/" target="_blank">Link Download</a></li>
<li><a class="premium nqnia" href="https://thanhtuan.host/" target="_blank">Source Theme</a></li>
</ul>
</div>
<div class="clear"></div>
Change URL : https://thanhtuan.host