Cara Membuat Tombol Demo/Download/Result Dengan Gradasi

Gradasi adalah sebuah efek perubahan warna yang berjalan secara otomatis dan berkala dan pada kesempatan kali ini, saya akan coba menerapkan pada sebuah tombol yang biasa dipakai pada entri posting. Biasanya dipakai untuk tombol-tombol pintasan seperti tombol DEMO, DOWNLOAD, RESULT dan bermacam tombol pintasan lainnya.

Penempatan tombol ini akan menarik para pengunjung untuk mengetahui apa yang ada dibalik tombol itu, karena perubahan warna dari tombol yang secara periodik akan merangsang mata untuk memperhatikannya. Penempatan kode tombol ini tidak sulit, meskipun bagi teman-teman yang masih baru dalam hal ini, sama seperti penulis yang hanya bisa copas artikel punya teman sendiri.

Biar sesuai dengan apa yang diharapkan, maka perhatikan langkah demi langkah penempatan kode script, style atau CSS dibawah ini dengan seksama. Langkah yang harus dilakukan adalah:

Masuk ke akun blogger.
Masuk ke menu tab Template > Edit HTML.
Letakkan kode dibawah ini tepat diatas kode </style> atau sebelum ]]></b:skin>.

/* Skin Design 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}

Kemudian SAVE template.
Selanjutnya, masukkan kode dibawah ini pada saat posting.

<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>

Ganti teks DEMO dan DOWNLOAD sesuai kainginan.
Kemudian klik tombol PUBLISH dan silahkan lihat hasilnya.

Result

Responsively

Responsive

Demikian tutorial yang bisa kami sampaikan, jika kurang dipahami silahkan tinggalkan pesan.