Cara Membuat Tombol Demo dan Download Flat UI Keren

Deny Listianto    16 Maret 2018

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.

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

• Result

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.