Cara Mudah Membuat Tombol Demo dan Download Flat UI Keren

Cara Mudah Membuat Tombol Demo dan Download Flat UI Keren - Pada tutorial kali ini Admin Sidewa akan berbagi tutorial Cara Membuat Tombol Demo dan Download Flat UI Yang Keren dengan tambahan icon Font Awesome. Tombol ini sendiri saya pernah lihat dibeberapa blog Download dan saya pun penasaran ingin membuatnya juga di blog.

Tombol ini Cocok untuk Sobat Blogger yang Sering membagikan Sesuatu melalui Blog baik itu berupa Template, Software, FIlm maupun hal-hal lain yang sobat dapat bagikan di blog kesayangan.

Terlepas dari semuanya itu pasti sobat membutuhkan yang namanya tombol download, Tombol download yang saya bagikan ini cukup simple karena Tampilan tombol demo dan download  terdapat icon Font Awesome pada tombol tersebut :

Oke tanpa perlu berlama-lama, langsung saja sobat ikuti langkah-langkah di bawah ini.

Cara Membuat Tombol Demo dan Download Flat UI

Widget ini menggunakan Font Awesome, jadi silakan tambahkan link CSS berikut di atas </head>
jika Template sobat belum menggunakan CSS Awesome.

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

Berikut demo Tombol Demo dan Download yang sudah saya buat dengan 2 style pilihan

Style 1 

Style 2

Cara Memasangnya Kode CSS Pada Template Blog

Sebelum Mengedit Template Alangkah Baiknya Sobat Salin dulu Kode HTML Template Sobat Jika terjadi Error maka bisa langsung diperbaiki

1. Masuk ke Blogger > Template > Edit HTML

2. Pastikan di blog Sobat terdapat script pemanggil css style font awesome seperti di bawah ini yang terletak di atas kode </head>. Jika tidak ada, silahkan Letakkan script pemanggil CSS style font awesome di bawah ini di atas kode </head>.

3. Letakkan kode CSS di bawah ini di atas kode ]]></b:skin> atau </style>
Jika sobat bingung bisa mencarinya dengan menekan CTRL + F lalu Ketikkan Kodenya.

Kode CSS Button Style

Kode CSS sobat pasang dalam template sobat, 

Style 1

/* CSS Button Style 1 */
.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.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:9px 48px 9px 16px;background:#f39c12;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}
.button li a.download{background:#3498db}
.button li a.demo:hover,.button li a.download:hover{background:#666}
.button li a.demo:active,.button li a.download:active{cursor:pointer}
.button li a.demo:after,.button li a.download: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:11px;font-family:fontawesome}
.button li a.download:after{content:'\f019'}

Style 2

/* CSS Button Style 2 */

.button2{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button2 ul{margin:0;padding:0}
.button2 li{display:inline;margin:5px;padding:0;list-style:none}
.button2 li a.demo,.button2 li a.download{position:relative;padding:14px 48px 14px 16px;background:#f39c12;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}
.button2 li a.download{background:#3498db}
.button2 li a.demo:hover,.button2 li a.download:hover{background:#666}
.button2 li a.demo:active,.button2 li a.download:active{cursor:pointer}
.button2 li a.demo:after,.button2 li a.download:after{content:'\F054';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}
.button2 li:hover a.demo:after,.button2 li:hover a.download:after{background:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

4. Jangan Lupa Klik Simpan template.

Untuk penggunaannya, silakan gunakan kode berikut ini ketika membuat posting (Tambahkan dalam tab HTML)

Style 1

<div style="text-align: center;">
  <ul class="button">
    <li><a class="demo" href="http://www.sidewa.com" target="_blank">Demo</a></li>
    <li><a class="download" href="http://www.sidewa.com" target="_blank">Download</a></li>
  </ul>
</div>
<div class="clear"></div>

Style 2

<div style="text-align: center;">
  <ul class="button2">
    <li><a class="demo" href="http://www.sidewa.com" target="_blank">Demo</a></li>
    <li><a class="download" href="http://www.sidewa.com" target="_blank">Download</a></li>
  </ul>
</div>
<div class="clear"></div>

Keterangan :

Ganti  http://www.sidewa.com  dengan link tujuan

Demikian tutorial Cara Mudah Membuat Tombol Demo dan Download Flat UI Super Keren. Semoga tutorial ini bermanfaat.

Share artikel ke sosmed

Facebook Twitter Google+ Whatsapp