Kali ini mamang akan membagikan arahan 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 memakai gradien color jadi alasannya ialah 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 menciptakan 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://quoranote.blogspot.com" target="_blank">Link Demo</a></li> <li><a class="download2 mangotepPelangi" href="https://quoranote.blogspot.com" target="_blank">Link Download</a></li> <li><a class="premium mangotepPelangi" href="https://quoranote.blogspot.com" target="_blank">Source Theme</a></li> </ul> </div> <div class="clear"></div> Untuk pengaturan warna pada gradien yang akan di buat anda dapat berkunjung ke blog igniel sebagai tutorial dasar untuk menciptakan 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 dapat like, share, and subscribe blog ini untuk mendapat artikel terbaru eksklusif dari email anda.
Sumber https://www.mangotep.com/
Click to see the code!