Cara Membuat Tombol Demo Gradient Color di Blogger – Sebelumnya saya sudah pernah membagikan beberapa model tombol dan download dengan efek pelangi di blogger, namun kali ini dengan gaya yang berbeda, yaitu tombol demo yang mirip digunakan oleh arlina design.
Karena sebelumnya saya pernah menggunakan template viral go dan pernah menggunakan tombol demo dan result efek animasi gradient color ini. Oleh karena itu saya akan membagikannya untuk kalian, karena ada beberapa orang yang meminta untuk saya bagikan kode cssnya.
Sebenarnya tombol demo responsive lebar ini ini yang mirip digunakan pada blog arlina design ini sudah banyak di share oleh blogger lain. namun karena mungkin masih ada yang belum tau saya akan membagikannya disini. Tanpa panjang lebar mari kita simak tutorial berikut ini.
Cara Membuat Tombol Demo Gradient Color di Blogger
- Buka Blogger kalian > Pilih Tema > Kemudian pilih Edit HTML
- Salin kode dibawah ini > Kemudian diatas kode ]]></b:skin> atau </style>
/* Tombol Demo Gradien Color */
.yukisnw{list-style:none;text-align:center;border:0;margin:10px 0;clear:both;text-decoration:none}
.yukisnw ul{margin:0;padding:0}
.yukisnw li{display:inline;margin:0 3px;padding:0;list-style:none}
.yukisnw li a.demo,.yukisnw li a.download,.btn,#wrap .yuki-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;}
.yukisnw li a.demo{background:linear-gradient(-45deg,#fb6d70,#fb5d60,#58b2a6,#51b1a4);background-size:400% 400%;animation:Gradient 15s ease infinite}
.yukisnw li a.download{background:linear-gradient(-45deg,#51b1a4,#58b2a6,#fb5d60,#fb6d70);margin:20px auto 0 auto;background-size:400% 400%;animation:Gradient 15s ease infinite}
.yukisnw li a.demo:hover,.yukisnw li a.download:hover,.btn:hover,.btn:active,.btn.down:hover,.btn.down:active,#wrap .yuki-btn:hover,#wrap .yuki-btn:active{box-shadow:0 4px 5px rgba(0,0,0,0.06),0 1px 1px rgba(0,0,0,0.09)}.post-body .yukisnw li,.post-body ul.yukisnw{margin:auto}
@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}*Keterangan: Kalian bisa mengubah kombinasi kedua warna tombol sesuai yang kalian inginkan.
- Jika sudah pilih Simpan Tema
- Untuk menerapkannya di dalam blog kalian, Buat Postingan Baru > kemudian letakkan kode ini pada mode HTML (bukan Compose)
<div style="text-align: center;">
<ul class="yukisnw">
<li><a class="demo" href="/" rel="nofollow noopener" target="_blank">DEMO</a></li>
<li><a class="download" href="/" rel="nofollow noopener" target="_blank">RESULTS</a></li>
</ul>
</div>
<div class="clear">
</div>*Keterangan: Kalian bisa menghapus salah satu kode, jika hanya ingin menggunakan satu tombol demo saja.
Itulah tadi cara membuat tombol demo gradient color dari analisyuki.com, semoga tutorial ini dapat bermanfaat untuk diterapkan di dalam blog kalian, Terimakasih.
