Cara Membuat Tombol Demo dan Download di Blog

Cara Membuat Tombol Demo dan Download di Blog

Demo dan Download merupakan salah satu tombol yang biasanya digunakan pada blog download. Kegunaan dari dua tombol ini untuk mempermudah pengunjung dalam melakukan demo dan download. Disini tombol demo memiliki fungsi untuk melakukan preview atau pratinjau pada file yang akan didownload sedangkan tombol download berfungsi untuk mendownload file yang ada di blog.

Itulah dia pembahasan tentang Tombol Demo dan Download tadi. Jika kalian mempunyai blog download maka kalian harus memasang kedua tombol tersebut agar pengunjung tidak bingung ketika ingin mendownload file yang ada pada blog kalian.

Disini kita akan memberikan Cara Membuat Tombol Demo dan Download di Blog dengan 2 style yang berbeda. Style yang pertama yaitu dengan tombol demo dan download yang sejajar, dan Style yang kedua yaitu dengan tombol demo berada diatas dan tombol download berada dibawah.

Kita langsung masuk saja ke langkah-langkahnya.

1. Pastikan blog kalian sudah terpasang font awesome. Jika belum, tambahkan kode ini tepat diatas </head>

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

2. Lalu masukkan kode ini tepat diatas </style>

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)}}

3. Sekarang kita akan membuat tombolnya. Caranya masukkan kode dibawah didalam postingan.

Style 1

<div style="text-align: center;">  <ul class="button">    <li><a class="demo" href="http://www.faishalkc.eu.org" target="_blank">Demo</a></li>    <li><a class="download" href="http://www.faishalkc.eu.org" 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.faishalkc.eu.org" target="_blank">Demo Link</a></li>    <li><a class="download" href="http://www.faishalkc.eu.org" target="_blank">Download Link</a></li>  </ul></div><div class="clear"></div>

Ganti link yang ditandai dengan link yang ingin kalian masukkan

4. Akhirnya tombolnya sudah jadi. Tampilannya bakalan menjadi seperti ini.

Style 1

Style 2

Penutup

Sekian dulu pembahasan kita tentang Cara Membuat Tombol Demo dan Download di Blog. Jika ada yang ingin ditanyakan silakan berikan komentar dibawah.