Cara Membuat Tombol Demo dengan Gradien Warna

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 dan Paste di atas Kode ]]></b:skin> atau </style>.

/* CSS Button Style */
.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='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
<div style="text-align: center;">
  <ul class="button2">
    <li><a class="demo mangotepPelangi" href="https://theboegisll.blogspot.com/" target="_blank">Link Demo</a></li>
    <li><a class="download2 mangotepPelangi" href="https://theboegisll.blogspot.com/" target="_blank">Link Download</a></li>
    <li><a class="premium mangotepPelangi" href="https://theboegisll.blogspot.com/" target="_blank">Source Theme</a></li>
  </ul>
</div>
<div class="clear"></div>

Ganti url  : https://theboegisll.blogspot.com/ dengan url Bapak
Hasil nya kaya di bawah :

See the Pen Cara Membuat Tombol Demo dengan Gradien Warna by Wiendhy (@wiana) on CodePen.

Untuk pengaturan warna pada gradien yang akan di buat anda bisa berkunjung ke SINI

Tags Blogging Widget