Cara Membuat Tombol Demo dan Download versi Flat UI

Published by Aditya Nur Kahfi 11 Oktober 2019

AdityaTekno.com - Cara Membuat Tombol Demo dan Download Flat UI. Kali ini saya akan berbagi tutorial membuat tombol demo dan download flat ui dengan tambahan icon Font Awesome.

Baca Juga: Cara Memperbaiki Icon ShareThis Blank Putih

Nah, bagi anda 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.

Untuk itu, anda patut mencoba menerapkan tutorial yang saya bagikan ini. Karena tampilan tombol atau button demo dan  button download yang saya bagikan ini sangat menarik, karena terdapat icon Font Awesome pada tombol tersebut.

Cara Membuat Tombol Demo dan Download Flat UI

Karena widget ini menggunakan Font Awesome, jadi silakan anda tambahkan link CSS berikut di atas </head>

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

Tapi, jika diblog anda sudah terpasang link CSS seperti diatas, anda bisa skip langkah yang satu ini.

1. Pertama, masuk ke Blogger >> Tema >> Edit HTML.

2. Kemudian, letakkan kode CSS di bawah ini di atas kode ]]></b:skin> atau </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. Simpan Tema.

4. 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.adityatekno.com" target="_blank">Demo</a></li>
    <li><a class="download" href="http://www.adityatekno.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.adityatekno.com"  target="_blank">Demo Link</a></li>    <li><a class="download" href="http://www.adityatekno.com"  target="_blank">Download Link</a></li>  </ul>
</div>
<div class="clear"></div>

Info: Ganti http://www.adityatekno.com dengan link yang dituju.

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

Style 1

See the Pen Tombol Demo dan Download Flat UI Style 1 by AdityaTekno (@adityatekno) on CodePen.

Style 2

See the Pen Tombol Demo dan Download Flat UI Style 2 by AdityaTekno (@adityatekno) on CodePen.

Demikian tutorial Cara Membuat Tombol Demo dan Download versi Flat UI. Semoga bermanfaat dan sampai jumpa dipostingan selanjutnya. Salam AdityaTekno.com