Minggu, 20 Mei 2018

Cara Membuat Tombol Demo dengan Gradien Warna

Cara Membuat Tombol Demo dengan Gradien Warna

Cara Membuat Tombol Demo dengan Gradien Warna
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='//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://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>
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.

Disana Gunung Disini Gunung, Ditengahnya Pulau Jawa
Kamu Bingung Infonya Nanggung, Mending Visit Blog Mang Otep Aja

Load comments