Cara Membuat Tombol Demo Gradient Color di Blogger - Sebelumnya aku sudah pernah membagikan beberapa model tombol dan d0wnl0ad dengan efek pelangi di blogger, namun kali ini dengan gaya yang berbeda, yaitu tombol demo yang seakan-akan dipakai oleh arlina design.
Karena sebelumnya aku pernah memakai template viral go dan pernah memakai tombol demo dan result efek animasi gradient color ini. Oleh alasannya ialah itu aku akan membagikannya untuk kalian, alasannya ialah ada beberapa orang yang meminta untuk aku bagikan isyarat cssnya.
Sebenarnya tombol demo responsive lebar ini ini yang seakan-akan dipakai pada blog arlina design ini sudah banyak di share oleh blogger lain. namun alasannya ialah mungkin masih ada yang belum tau aku akan membagikannya disini. Tanpa panjang lebar mari kita simak tutorial berikut ini.
Cara Membuat Tombol Demo Gradient Color di Blogger
1. Buka Blogger kalian > Pilih Tema > Kemudian pilih Edit HTML
2. Salin isyarat dibawah ini > Kemudian diatas isyarat ]]></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.d0wnl0ad,.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.d0wnl0ad{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.d0wnl0ad: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 sanggup mengubah kombinasi kedua warna tombol sesuai yang kalian inginkan.
3. Jika sudah pilih Simpan Tema
4. Untuk menerapkannya di dalam blog kalian, Buat Postingan Baru > lalu letakkan isyarat 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="d0wnl0ad" href="/" rel="nofollow noopener" target="_blank">RESULTS</a></li> </ul> </div> <div class="clear"> </div>*Keterangan: Kalian sanggup menghapus salah satu kode, jikalau hanya ingin memakai satu tombol demo saja.
Itulah tadi cara menciptakan tombol demo gradient color dari analisyuki.com, agar tutorial ini sanggup bermanfaat untuk diterapkan di dalam blog kalian, Terimakasih.
Sumber http://www.analisyuki.com/