Membuat Tombol Demo dan Download Flat UI Terbaru 2016

iNDZGN - Apa kabar teman, dari kemarin saya posting artikel Template, dan sekarang saya akan berbagi tutorial blogging. Tutorial yang akan saya upload kali ini mengenai cara Membuat Tombol Demo dan Download Flat UI Terbaru 2016 dengan menggunakan Font Awesome. Tutorial ini sangat berguna untuk kamu yang suka membagikan sesuatu pada blog kamu, contohnya sendiri blog saya ini, yang membagikan kumpulan template Blogger.

Tombol demo dan download ini sangat menarik, karena menggunakan font awesome. Ok, langsung saja simak cara yang akan saya bagikan di bawah ini.

Membuat Tombol Demo dan Download Flat UI Terbaru 2016

Style 1

See the Pen Membuat Tombol Demo dan Download Flat UI Terbaru 2016 by Teguh Ari Wibowo (@nickoardhana) on CodePen.

Style 2

See the Pen Membuat Tombol Demo dan Download Flat UI Style 2 by Teguh Ari Wibowo (@nickoardhana) on CodePen.

1. Masuk ke akun blogger kamu, dan kemudian buka template, edit HTML
2. Sebelumnya, pastikan blog kamu terdapat script pemanggil CSS Style Font Awesome. Jika belum ada, masukan script di bawah ini di atas kode </head>

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

3. Jika sudah terdapat script kode font awesome, lewati langkah nomor 2 diatas dan ikuti langkah nomor 3 ini. Letakan kode CSS di bawah ini diatas kode ]]></b:skin> atau </style>

Style 1

/* CSS Button Style 1 by indzgn.blogspot.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'}

Style 2

/* CSS Button Style 2 by indzgn.blogspot.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)}}

4. Simpan template kamu.
5. Untuk penggunaanya, silahkan gunakan kode di bawah ini ketika membuat artikel. (Gunakan mode HTML)

Style 1

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