Cara Membuat Tombol Demo dan Download Tampilan Elegant

Membuat Tombol Download dan Demo, Kesempatan kali ini saya mencoba membagikan tutorial blog menambahkan tombol download dan demo, munkin dari beberapa blogger ada yang sesuatu yang ingin di bagikan melalui blog baik itu template, softwares, ebook, dan hal lain pasti sangat membutuhkan tombol download dan demo.

Contoh tampilan

Tampilan download demo yang saya bagikan ini menurut saya sangat elegant dengan penambahan font awesome pada tombol.

Baiklah gak usah berlama-lama langsung kita meluncur ke TKP :

Cara Membuat Tombol Demo dan Download Tampilan Elegant :

Widget ini menggunakan font awesome, untuk itu silakan menambahkan code link CSS di bawah ini tepat di atas </head>

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

1. Silakan masuk Blogger - Template - Edit HTML
2. Letakkan script CSS di bawah di atas ]]></b:skin> atau </style>.

Script CSS

/* CSS Button www.chaerulakbar.net */
.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. Simpan Template.

Untuk menampilkan tombol Download dan Demo silakan masukkan script di bawah ini di dalam postingan kamu yang ini di beri tampilan Download dan Demo. Saat memasukkan scriptnya di postingan masuk ke (Tab HTML) bukan Compose.

Script HTML dalam postingan

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

Catatan:

- Silakan ganti tulisan http://www.chaerulakbar.net untuk link target kamu.
- Untuk memudahkan pencarian script di dalam template silakan tekan CTLR + F

• Demo

Demikian tutorial Cara Membuat Tombol Demo dan Download Tampilan Elegant, Semoga tutorial blog ini bisa bermanfaat dan berhasil di terapkan di blog kamu.

script by http://www.arlinadzgn.com/2016/04/membuat-tombol-demo-dan-download-flat-ui.html

Diposkan oleh Unknown