Cara Membuat Tombol Demo/Download Gradasi Seperti Arlina Design

[MASIHTERJAGA] - Pada postingan ini saya akan membagikan tutorial tentang Cara Membuat Tombol Demo/Download Gradiasi Seperti Arlina Design. Oke, langsung saja.

Tombol Demo/Download ala Arlina Design

Letakan Kode CSS di bawah ini diatas kode </style> atau di depan ]]></b:skin>

CSS/* Shortcodes */
@-webkit-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}@keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}.button{list-style:none;text-align:center;border:0;margin:10px 0;clear:both;text-decoration:none}.button ul{margin:0;padding:0}.button li{display:inline;margin:0 3px;padding:0;list-style:none}.button li a.demo,.button li a.download,.btn,#wrap .arlina-btn{display:block;position:relative;vertical-align:top;height:52px;line-height:52px;padding:0 30px;font-size:16px;color:#fff;text-align:center;text-decoration:none;border-radius:3px;cursor:pointer;margin:auto;box-shadow:0 10px 20px rgba(0,0,0,0.06),0 6px 6px rgba(0,0,0,0.09)}.button li a.demo{background:linear-gradient(-45deg,#3aa4f3,#3aa4f3,#f28d47,#f28d47);background-size:400% 400%;animation:Gradient 15s ease infinite}.button li a.download{background:linear-gradient(-45deg,#f28d47,#f28d47,#3aa4f3,#3aa4f3);margin:20px auto 0 auto;background-size:400% 400%;animation:Gradient 15s ease infinite}.button li a.demo:hover,.button li a.download:hover,.btn:hover,.btn:active,.btn.down:hover,.btn.down:active,#wrap .arlina-btn:hover,#wrap .arlina-btn:active{box-shadow:0 4px 5px rgba(0,0,0,0.06),0 1px 1px rgba(0,0,0,0.09)}.post-body .button li,.post-body ul.button{margin:auto}.first-letter{float:left;font-size:60px;line-height:60px;padding-top:4px;padding-right:8px;padding-left:3px;font-family:Georgia}#flippy{text-align:center;margin:auto;display:inline}#flippy button{display:block;width:100%;padding:12px;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;margin:20px auto;border-radius:3px;transition:all .3s}#flippy button:hover,#flippy button:focus{outline:none;opacity:1;color:#fff}#flippanel{padding:1px;text-align:left;background:#fafafa;border:1px solid rgba(0,0,0,0.05);margin:10px 0 0 0}#flippanel{padding:24px;display:none}#flippanel img{background:#f5f5f5;margin:10px auto}.first-letter{float:left;font-size:60px;line-height:60px;padding-top:4px;padding-right:8px;padding-left:3px;font-family:Georgia}.bagidua{-webkit-column-count:2;-moz-column-count:2;column-count:2}.bagitiga{-webkit-column-count:3;-moz-column-count:3;column-count:3}.bagiempat{-webkit-column-count:4;-moz-column-count:3;column-count:4}.bagidua img,.bagitiga img,.bagiempat img{-webkit-backface-visibility:hidden;margin-bottom:20px;max-width:100%}#wrap{position:relative;margin:20px auto;text-align:center}#wrap br{display:none}.post-body a:visited.btn,.post-body a:visited.btn.down,.post-body a:link.btn,.post-body a.btn.down,.post-body a.btn:hover,.post-body a.btn:active,.post-body a.btn.down:hover,.post-body a.btn.down:active,#wrap .arlina-btn{display:block;position:relative;background:#f28d47;color:#fff;padding:0 20px;overflow:hidden;background:linear-gradient(-45deg,#3aa4f3,#3aa4f3,#f28d47,#f28d47);background-size:400% 400%;animation:Gradient 15s ease infinite}#wrap i{display:none}.btn.down.anima{-webkit-animation:anim 2s ease-in infinite;animation:anim 2s ease-in infinite}.videoyoutube{text-align:center;margin:auto;width:100%}.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

Simpan Template
Jika kalian sudah memakai template Dari ArlinaDzgn cari kode CSS seperi dibawah ini lalu ganti dengan kode CSS diatas.

CSS/* Arlina Shortcodes */
.button{list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.post-body ul.button {list-style:none;text-align:center;margin:20px auto;padding:2px;font-size:14px;clear:both;z-index:2;}
.button li{display:inline;margin:0 5px;padding:0;list-style:none;}
.post-body ul.button a.demo,.post-body ul.button a.download{display:block;background:#97b28e;max-width:180px;padding:8px 12px;color:#fff;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;margin:auto;border-radius:3px;transition:all .3s}
.post-body ul.button a.demo{background:#95a5a6;}
.post-body ul.button a.download{background:#95a5a6;}
.post-body ul.button a.demo:hover,.post-body ul.button a.download:hover {background:#34495e;color:#fff}
.first-letter{float:left;color:#f77c6a;font-size:75px;line-height:60px;padding-top:4px;padding-right:8px;padding-left:3px;font-family:Georgia}
.bagidua {-webkit-column-count:2;-moz-column-count:2;column-count:2;}
.bagitiga {-webkit-column-count:3;-moz-column-count:3;column-count:3;}
.bagiempat {-webkit-column-count:4;-moz-column-count:3;column-count:4;}
.bagidua img,.bagitiga img,.bagiempat img{-webkit-backface-visibility:hidden;margin-bottom:20px;max-width:100%;}
#wrap{margin:20px auto;text-align:center}
.btn{background:#7fa4ed;padding:8px 12px;color:#fff;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:4px;transition:all .3s}
.btn:hover,.btn:active,.btn.down:hover,.btn.down:active{background:#41598B}
.post-body a:visited.btn,.post-body a:visited.btn.down,.post-body a:link.btn,.post-body a.btn.down,.post-body a.btn:hover,.post-body a.btn:active,.post-body a.btn.down:hover,.post-body a.btn.down:active{color:#fff}
.btn i{margin:0}
.btn.down.anima{-webkit-animation:anim 2s ease-in infinite;animation:anim 2s ease-in infinite}
.videoyoutube{text-align:center;margin:auto;width:100%;}.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.post-body pre{background-color:#383a4c;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;position:relative;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}
.post-body pre::-webkit-scrollbar,pre::-moz-scrollbar,pre code::-webkit-scrollbar,pre code::-moz-scrollbar,code::-webkit-scrollbar,code::-moz-scrollbar {display:none;}
.post-body pre code{display:block;background:none;border:none;color:#bdc3c7;padding:25px 20px 20px 20px;font-family:'Source Code Pro',Menlo,Consolas,Monaco,monospace;font-size:.83rem;white-space:pre;overflow:auto}
pre mark,code mark,pre code mark {background-color:#f39c12!important;color:#fff!important;padding:2px;margin:0 2px;border-radius:2px;}
#related-summary .news-text,#share-menu{display:none}
.post-body pre code::selection,.post-body pre::selection{background:#bdc3c7;color:#fff;}

Selanjutnya cek hasilnya dengan Membuat post baru atau mengedit postingan anda menggunakan kode dibawah ini untuk memanggil CSS tersebut

HTML<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="/" rel="nofollow noopener" target="_blank">Demo</a></li>
<li><a class="download" href="/" rel="nofollow noopener" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear">
</div>

Jika berhasil, maka hasilnya akan sama seperti contoh dibawah ini:

• Demo
• Download

Baca Juga: Tips Menulis Artikel di Blogger

Demikian Artikel tentang Cara Membuat Tombol Demo/Download Gradiasi Seperti Arlina Design, sangat mudah bukan? Selamat mencoba, Semoga Tutorial Saya ini bisa Bermanfaat until Kita semua. Salam Blogger!

Tweet