Cara Membuat Tombol Demo dan Download Efek Gradient di Postingan Blogger

Cara Membuat Tombol Demo dan Download Efek Gradient di Postingan Blogger – Sebelumnya saya mohon maaf jika membuat beberapa tombol demo dan download pada postingan blogger berulang-ulang, namun saya sengaja membuat tombol demo dan download ini bervariasi agar kalian dapat memilih mana yang lebih kalian sukai.

Tombol demo dan download pada postingan blogger/blogspot ini saya buat dengan efek gradient (warna-warni/pelangi) mirip dengan tombol yang biasa sering saya gunakan, namun saya tambahkan dengan icon font awesome di samping kanannya agar terlihat lebih keren lagi.

Sebenarnya sudah banyak dari para blogger yang memposting tombol yang sama dengan yang posting ini, namun saya membuatnya agar terlihat sedikit lebih berbeda dan lebih indah dipandang mata. Untuk itu mari kita simak baik-baik tutorial cara membuat tombol demo dan download keren ini di postingan blog kalian.

Cara Membuat Tombol Demo dan Download Efek Gradient di Postingan Blogger

1. Buka Blogger kalian > pilih menu Tema > kemudian tekan tombol Edit HTML

2. Salin Kode CSS ini dan letakkan tepat berada diatas kode ]]></b:skin> atau </style>

/* CSS Button Gradient */
.grdntbutton{width:90%;list-style:none;text-align:center;border:0;margin:10px 0;clear:both;text-decoration:none}
.grdntbutton ul{margin:0;padding:0}
.grdntbutton li{display:inline;margin:5px;padding:0;list-style:none}
.grdntbutton li a.demogrdnt,.grdntbutton li a.downloadgrdnt{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;line-height:normal;transition:all .3s}
.grdntbutton li a.downloadgrdnt{background:#3498db,#f39c12}
.grdntbutton li a.premium{background:#d234db,#f39c12}
.grdntbutton li a.demogrdnt:active,.grdntbutton li a.downloadgrdnt:active,.grdntbutton{cursor:pointer}
.grdntbutton li a.demogrdnt:after,.grdntbutton li a.downloadgrdnt:after{content:'f002';background:rgba(255,255,255,0.2);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px;font-family:fontawesome}
.grdntbutton li a.downloadgrdnt:after{content:'f019'}
.gradientbutton {background: linear-gradient(45deg,#51b1a4,#58b2a6,#fb5d60,#fb6d70);background-size: 500% 500%;-webkit-animation: gradient 12s ease infinite;-moz-animation: gradient 12s ease infinite;animation: gradient 12s ease infinite;}
@-webkit-keyframes gradient {0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@-moz-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%}}

3. Jika sudah, tekan tombol Simpan Tema

4. Untuk menerapkannya di blog kalian, buat postingan baru > kemudian letakkan kode ini pada menu HTML (bukan ~~Compose~~)

<div style="text-align: center;">
<ul class="grdntbutton">
<li><a class="demogrdnt gradientbutton" href="LINK-ANDA" rel="nofollow" target="_blank">DEMO</a></li>
<li><a class="downloadgrdnt gradientbutton" href="LINK-ANDA" rel="nofollow" target="_blank">DOWNLOAD</a></li>
</ul>
</div>
<div class="clear">
</div>

5. Jika sudah tinggal Publikasikan saja

Keterangan: