Cara Membuat Tombol Download dan Demo

Cara Membuat Tombol Download dan Demo - Saya akan berbagi tutorial Cara Membuat Tombol Download dan Demo dengan tambahan icon Font Awesome. Untuk sobat yang biasa membagikan sesuatu melalui blog baik itu berbagi template, software, film, dan hal lain yang dapat dibagikan pastinya akan membutuhkan tombol demo dan download.

Tampilan tombol demo dan download yang saya bagikan ini sangat menarik, karena terdapat icon Font Awesome pada tombol tersebut :

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

TUTORIAL MEMBUAT TOMBOL DOWNLOAD DAN DEMO

1.Salin kode di bawah ini.

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

2.Sisipkan di atas </head>

1. Masuk ke Blogger > Template > Edit HTML

2. Pastikan di blog Anda 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>

Style 1

CSS/* CSS Button Style 1 by www.tirtamubien.com */
.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'}

CONTOH Style 1

Style 2

CSS/* CSS Button Style 2 by www.tirtamubien.com */
.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)}}

CONTOH Style 2

4. Simpan template.

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

Style 1

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

Style 2

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