Cara Membuat Tombol Downloud/Demo Gardiant Ala Arlina Design

Cara Membuat Tombol Downloud/Demo Gardiant Ala Arlina Design - Pada Kesempatan Kali ini saya akan memberikan tutorial lagi untuk kalian semu, kalian pernah berkunjung ke blog Arlina Design kan, disana ada tombol Demo nya!! Disitu berupa gardiant warna kan.

Untuk itu kali ini saya akan memberikan tutorial buat kalian, seperti yang saya di blog ini. Nah kalian tertarik dengan tutorial ini berikut tutorialnya.

Cara Membuat Tombol Downloud/Demo Gardiant Ala Arlina Design

Langkah pertama kalian masuk Dashboard Blogger, pilih Tema kemudian klik Edit HTML.

Kemudian kalian masukkan CSS ini di atas kode ]]></b:skin> atau </style>.

CSS/* Shortcodes */
@-webkit-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%}}.button{list-style:none;text-align:center;border:0;margin:10px 0;clear:both;text-decoration:none}.button ul{margin:0;padding:0}.button li{display:inline;margin:0 3px;padding:0;list-style:none}.button li a.demo,.button li a.download,.btn,#wrap .arlina-btn{display:block;position:relative;vertical-align:top;height:52px;line-height:52px;padding:0 30px;font-size:16px;color:#fff;text-align:center;text-decoration:none;border-radius:3px;cursor:pointer;margin:auto;box-shadow:0 10px 20px rgba(0,0,0,0.06),0 6px 6px rgba(0,0,0,0.09)}.button li a.demo{background:linear-gradient(-45deg,#3aa4f3,#3aa4f3,#f28d47,#f28d47);background-size:400% 400%;animation:Gradient 15s ease infinite}.button li a.download{background:linear-gradient(-45deg,#f28d47,#f28d47,#3aa4f3,#3aa4f3);margin:20px auto 0 auto;background-size:400% 400%;animation:Gradient 15s ease infinite}.button li a.demo:hover,.button li a.download:hover,.btn:hover,.btn:active,.btn.down:hover,.btn.down:active,#wrap .arlina-btn:hover,#wrap .arlina-btn:active{box-shadow:0 4px 5px rgba(0,0,0,0.06),0 1px 1px rgba(0,0,0,0.09)}.post-body .button li,.post-body ul.button{margin:auto}.first-letter{float:left;font-size:60px;line-height:60px;padding-top:4px;padding-right:8px;padding-left:3px;font-family:Georgia}#flippy{text-align:center;margin:auto;display:inline}#flippy button{display:block;width:100%;padding:12px;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;margin:20px auto;border-radius:3px;transition:all .3s}#flippy button:hover,#flippy button:focus{outline:none;opacity:1;color:#fff}#flippanel{padding:1px;text-align:left;background:#fafafa;border:1px solid rgba(0,0,0,0.05);margin:10px 0 0 0}#flippanel{padding:24px;display:none}#flippanel img{background:#f5f5f5;margin:10px auto}.first-letter{float:left;font-size:60px;line-height:60px;padding-top:4px;padding-right:8px;padding-left:3px;font-family:Georgia}.bagidua{-webkit-column-count:2;-moz-column-count:2;column-count:2}.bagitiga{-webkit-column-count:3;-moz-column-count:3;column-count:3}.bagiempat{-webkit-column-count:4;-moz-column-count:3;column-count:4}.bagidua img,.bagitiga img,.bagiempat img{-webkit-backface-visibility:hidden;margin-bottom:20px;max-width:100%}#wrap{position:relative;margin:20px auto;text-align:center}#wrap br{display:none}.post-body a:visited.btn,.post-body a:visited.btn.down,.post-body a:link.btn,.post-body a.btn.down,.post-body a.btn:hover,.post-body a.btn:active,.post-body a.btn.down:hover,.post-body a.btn.down:active,#wrap .arlina-btn{display:block;position:relative;background:#f28d47;color:#fff;padding:0 20px;overflow:hidden;background:linear-gradient(-45deg,#3aa4f3,#3aa4f3,#f28d47,#f28d47);background-size:400% 400%;animation:Gradient 15s ease infinite}#wrap i{display:none}.btn.down.anima{-webkit-animation:anim 2s ease-in infinite;animation:anim 2s ease-in infinite}.videoyoutube{text-align:center;margin:auto;width:100%}.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

Untuk memanggilnya, kalian gunakan kode berikut ini.

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="/" rel="nofollow noopener" target="_blank">Demo</a></li>
<li><a class="download" href="/" rel="nofollow noopener" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear">
</div>

Simpan Template, selesai. Jika kalian pengen tahu Demonya seperti apa bisa cek di artikel ini disini

Selamat mencoba.

Mas Dar Hanya Blogger Amatiran, dan mulai ngeblog pada tahun 2017 dengan blog Ivhaa Netwoek setelah itu fakum dan ngeblog lagi di tahun 2022 dengan nama sudarjurnalblogg.web.id

Berbagi :