Cara Membuat Tombol Demo dan Download Warna Animasi Gradient di Postingan Blogger dengan CSS


Halo sobat blogger semuanya, pada kesempatan kali ini saya akan berbagi  Cara Membuat Tombol Demo dan Download Warna Animasi Gradient di Postingan Blogger dengan CSS.

Sebelumnya saja juga telah mempoting cara membuat tombol download film di blog sekarang cara part 2 nya tombol demo dan download animasi gradient.

Untuk caranya sama dengan cara sebelunya kita masih menggunakan kode CSS sebagai alat. Dengan menggunakan script css kita dapat membuat berbagi desain web sangat menarik dan indah.

Ok tanpa banyak penjelasan lagi, kita langsung saja masuk ke panduan pembahasan menggunakan kode css untuk membuat tombol demo dan download efect animasi gradasi. Berikut adalah turorialnya :


Cara Membuat Tombol Demo dan Download Warna Animasi Gradient di Postingan Blog

1. Pertama tentunya kita masuk ke dashboard blogger terlebih dahulu, kemudian klik pada Tema dan Klik Edit HTML

2. Cari kode ]]></b:skin> atau </skin>Untuk lebih mudahnya gunakan fitur pencarian caranya tekan CTRL+F, jika sudah ketemu tinggal kamu copy pastekan kode CSS dibawah ini tepat diatasnya.

/* 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. Selajutnya klik simpan.

4. Untuk penerapannya buat postingan baru, kemudian masuk pada mode HTML dan pastekan kode dibawah ini.

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


Catatan

Ubah kode Link Url dengan Link demo atau Download, sesuaikan saja.


Bagaimana cukup mudahkan Cara Membuat Tombol Demo dan Download Warna Animasi Gradient di Postingan Blogger, Sekian artikel yang dapat saya sampaikan semoga bermanfaat dan menambah ilmu pengetahuan kita.

Tidak ada komentar untuk "Cara Membuat Tombol Demo dan Download Warna Animasi Gradient di Postingan Blogger dengan CSS"