Cara Membuat Tombol Demo dengan Gradien Warna

Cara Membuat Tombol Demo dengan Gradien Warna

Diposting pada

Blog Mang Otep | Cara Membuat Tombol Demo dengan Gradien Warna – Gradien warna (Color) untuk CSS yang sekarang sedang booming bagi kalangan blogger karena tampilannya yang unik dengan pergantian warna yang bisa diatur dengan sangat mudah.

Kali ini mamang akan membagikan kode Cara Membuat Tombol Demo dan Download dengan Gradien Warna yang mana mamang sudah pernah share dengan gaya yang jadul pada artikel sebelumnya di Cara Membuat Tombol Download & Demo Simpel di Blog.

Bedanya apa mang dengan yang dulu ? bedanya terletak pada tampilan full width dan juga yang dahulu tidak menggunakan gradien color jadi karena mamang ingin ikutan yang lain sehingga mamang kasih tutorial ini (biar tidak ketinggalan jaman lah ya). Langsung saja tanpa wara – wiri lagi, yuk simak tutorialnya.

Cara Membuat Tombol Demo dengan Gradien Warna:

1. Masuk ke dashboard blogger anda

2. Menuju Menu Template dan pilih Edit HTML

3. Copy Kode Dibawah ini ]]></b:skin> atau </style>.

/* CSS Button Style by mangotep.com */
.button2{width:90%;list-style:none;text-align:center;border:0;margin:10px 0;clear:both;text-decoration:none}
.button2 ul{margin:0;padding:0}
.button2 li{display:inline;margin:5px;padding:0;list-style:none}
.button2 li a.demo,.button2 li a.download2,.button2 li a.premium{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 rgba(0,0,0,0.1);line-height:normal;transition:all .3s}
.button2 li a.download2{background:#3498db,#f39c12}
.button2 li a.premium{background:#d234db,#f39c12}
.button2 li a.demo:hover,.button2 li a.download2:hover,.button2 li a.premium:hover{background:#666}
.button2 li a.demo:active,.button2 li a.download2:active,.button2 li a.premium:active{cursor:pointer}
.button2 li a.demo:after,.button2 li a.download2:after,.button2 li a.premium:after{content:'f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px;font-family:fontawesome}
.button2 li a.download2:after{content:'f019'}
.button2 li a.premium:after{content:'f155'}
.mangotepPelangi {
    background: linear-gradient(45deg, #f22613, #f89406, #26a65b, #5868ec, #f54e80, #f7ca18, #d2527f);
    background-size: 500% 500%;
    -webkit-animation: mangotepGradient 12s ease infinite;
    -moz-animation: mangotepGradient 12s ease infinite;
    animation: mangotepGradient 12s ease infinite;
}
@-webkit-keyframes mangotepGradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes mangotepGradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes mangotepGradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

4. Untuk penggunaannya, anda tinggal masukkan HTML dibawah ini setiap kali ingin membuat tombol download dan demo pada artikel anda.

<link href='https://www.mangotep.com?e2005165a7=b0ZMbUZnTlB2NktzUDlWaFpVVWRDUWNrNmpQRlFOZkU2RytSWS85TFJPb1d0YUgwZVBSMEgvR1JjcnYzNFFqaGcrdkNzbTh5MHhsditQOXBKSHZIclJ0UnN1RmdyYytlNGE5aE12MW0vZlhtbHBVZWFvejlXWjM2YnhCZUE4bnM5U040K1hkSkczSnMvM1h4RU1sUDJ3PT0=' rel='nofollow' rel='stylesheet'/>
<div style="text-align: center;">
  <ul class="button2">
    <li><a class="demo mangotepPelangi" href="https://www.mangotep.com/" target="_blank">Link Demo</a></li>
    <li><a class="download2 mangotepPelangi" href="https://www.mangotep.com/" target="_blank">Link Download</a></li>
    <li><a class="premium mangotepPelangi" href="https://www.mangotep.com/" target="_blank">Source Theme</a></li>
  </ul>
</div>
<div class="clear"></div>

Dengan kode CSS dan HTML desain diatas menghasilkan gradien warna pada tombol demo dibawah, jika kalian ingin mengubah warna nya, kalian bisa mengganti kode CSS diatas dengan warna yang kalian inginkan.

Untuk pengaturan warna pada gradien yang akan di buat anda bisa berkunjung ke blog igniel sebagai tutorial dasar untuk membuat gradien color pada blog anda.

Demikianlah mamang share artikel Cara Membuat Tombol Demo dengan Gradien Warna, semoga bermanfaat untuk anda. Jika menyukai artikel ini anda bisa like, share, and subscribe blog ini untuk mendapatkan artikel terbaru langsung dari email anda.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *