Cara Membuat Tombol Demo dan Download Flat UI Keren - Deny Listianto

March 16, 2018

Cara Membuat Tombol Demo dan Download Flat UI Keren

Cara Mudah Membuat Tombol Demo dan Download Flat UI Keren - Pada tutorial kali ini Admin akan berbagi tutorial Cara Membuat Tombol Demo dan Download Flat UI Yang Keren dengan tambahan icon Font Awesome.

Download Dan Demo

Tombol Demo atau Download Button sangat di perlukan oleh seorang blogger, Tombol Download biasa di gunakan membungkus link download atau demo dan yang lainya.

Apalagi Jika Anda mempunyai blog berisikan Template blog, app atau lagu bahkan video, yang jelas pasti akan memerlukan tombol demo dandownload buat para pengunjung.

Jika anda ingin supaya tampilan link demo dan download anda lebih menarik dan keren maka anda perlu melanjutkan membaca artikel ini sampai selesai.

Mungkin anda lebih suka untuk membuat link demo dan download yang keren dan menarik untuk memudahkan pengunjung untuk mengetahui link demo dan downloadnya.

Cara membuat Tombol Demo dan Download sangat mudah dan sederhana.


1. Buka atau login Blogger sobat terlebih dahulu
2. Klik menu Tema, lalu Edit HTML
3. Kemudian tambahkan kode dibawah sebelum kode ]]></b:skin> atau </style>. Jika ingin lebih mudah mencari kode di samping tekan CTRL + F dan cari kode di samping.

.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both;border: 1px solid rgba(0,0,0,0.1)}
.button ul{margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none}
.button li a.demo,.button li a.download{position:relative;padding:14px 48px 14px 16px;background:#303030;display:block;color:#fff!important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden}
.button li a.download{background:#f44336}
.button li a.demo:hover{background:#f44336}
.button li a.download:hover{background:#202020}
.button li a.demo:active,.button li a.download:active{cursor:pointer}
.button li a.demo: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 24px;font-family:fontawesome;transition:all .3s}
.button li a.download:after{content:'\f019';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 24px;font-family:fontawesome;transition:all .3s}
.button li:hover a.demo:after,.button li:hover a.download:after{background:transparent;-webkit-animation:fadeinup .3s alternate ease infinite;animation:fadeinup .3s alternate ease infinite}
@-webkit-keyframes fadeinup{from{-webkit-transform:translateY(0)}to{-webkit-transform:translateX(3px)}}
@keyframes fadeinup{from{transform:translateX(0)}to{transform:translateY(3px)}}

4. Setelah itu Simpan Tema
5. Sekarang untuk bisa menggunakan tombol download dan demo maka silakan terapkan kode dibawah setiap anda ingin menampilkan tombol demo dan download

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://www.denylistianto.com/" target="_blank">Demo</a></li>
<li><a class="download" href="http://www.denylistianto.com/" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear">
</div>.
Ganti link yang saya tandai di atas dengan link tujuan sobat

6. lihat hasilnya


Jika fontawesome tidak muncul tambahkan kode dibawah ini sebelum kode </head> dan jangan lupa di simpan ya...

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"></link>

Selesai... Cukup sekian tutorial yang bisa saya bagikan. Semoga bisa membantu dan bermanfaat.
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Notifications

Disqus Logo