Header Ads

Cara Membuat Tombol Demo dan Download Dengan Icon Font Awesome

Cara Membuat Tombol Demo dan Download Dengan Icon Font Awesome

Cara Membuat Tombol Demo dan Download Dengan Icon Font Awesome - pada postingan sebelumnya saya telah membuat Tutorial Cara Membuat Tombol Demo dan Download Simple namun elegant.

Tidak ada perbedaan yang mencolok dari tombol sebelumnya karena kita hanya akan menambahkan Icon pada Tombol Demo dan Download ini menggunkan Icon Font Awesome agar terlihat lebih hidup menarik.
  • Masuk dashbord blog > Template > Edit Html lalu Tambahkan Link CSS di bawah ini tepat di atas kode </Head> 
 <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

Tapi Jika di blog Anda sudah ada lewati saja langkah ini.
  • Selanjutnya Letakan kode Css di bawah ini di atas ]]></b:skin> atau </style>  kemudan Simpan Template
 /* CSS Button by by www.arlinadzgn.com Edited zufray.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:'\f06e';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'}
 
Anda juga bisa merubah warna background Tombol nya dengan mengganti Warna Tombol untuk Demo #f39c12 , #3498db untuk download dan #666 untuk merubah warna tombol ketika di sorot mouse.

Selain itu Anda bisa merubah Icon Font Awesome di Tombol Demo dan Download nya dengan Mengganti kode \f06e untuk Demo dan \f019 untuk Download.  klik di sini untuk melihat Kumpulan Font Icon Awesome.
  • Cara Penerapan di Postingan
gunakan kode di bawah ini dalam mode HTML ketika membuat Postingan

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

Silahkan ganti link http://zufray.blogspot.com dengan link yang anda kehendaki.


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

No comments

Powered by Blogger.