Tampilan tombol demo dan download yang aku bagikan ini sangat menarik, sebab terdapat icon Font Awesome pada tombol tersebut :
Oke tanpa perlu berlama-lama, pribadi saja teman ikuti langkah-langkah di bawah ini.
Cara Membuat Tombol Demo dan Download Flat UI
Widget ini memakai Font Awesome, jadi silakan tambahkan link CSS berikut di atas </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>Berikut demo Tombol Demo dan Download yang sudah aku buat dengan 2 style pilihan
Style 1
Style 2
1. Masuk ke Blogger > Template > Edit HTML
2. Pastikan di blog Anda terdapat script pemanggil css style font awesome menyerupai di bawah ini yang terletak di atas instruksi </head>. Jika tidak ada, silahkan Letakkan script pemanggil CSS style font awesome di bawah ini di atas instruksi </head>.
3. Letakkan instruksi CSS di bawah ini di atas instruksi ]]></b:skin> atau </style>
Style 1
/* CSS Button Style 1 by www.arlinadzgn.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 www.arlinadzgn.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.
5. Untuk penggunaannya, silakan gunakan instruksi berikut ini dikala menciptakan posting (Tambahkan dalam tab HTML)
Style 1
<div style="text-align: center;"> <ul class="button"> <li><a class="demo" href="http://www.arlinadzgn.com" target="_blank">Demo</a></li> <li><a class="download" href="http://www.arlinadzgn.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.arlinadzgn.com" target="_blank">Demo Link</a></li> <li><a class="download" href="http://www.arlinadzgn.com" target="_blank">Download Link</a></li> </ul> </div> <div class="clear"></div>Ganti http://www.arlinadzgn.com dengan link tujuan
Demikian tutorial Cara Membuat Tombol Demo dan Download Flat UI. Semoga tutorial ini bermanfaat.