#Cara Membuat Tombol Demo Bostrap Flat Ui Keren Diblogger!

Awaknyo >>

Cara Membuat Tombol Demo Bostrap Flat Ui Keren Diblogger!

Selamat datang, pada kesempatan ini kembali lagi kita share mengenai info tentang tutorial blogger, kali ini cara membuat tombol demo, biasanya digunakan untuk menyajikan demo template. tombol yang keren tentu akan membuat blog kita jadi menarik, nah jika blog menarik pembaca akan betah berlama lama diblog kita. jika pembaca betah akan meningkatkan kualitas blog. nah berikut caranya sob:

pasang kode berikut diatas </head>

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

pasang kode berikut diatas  ]]></b:skin> atau </style>

pilih gaya, yang berikut gaya sejajar samping

/* CSS Button demo*/
.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'}

yang berikut gaya berjajar kebawah

/* CSS Button demo 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)}}

untuk cara gunanya silahkan paste kode berikut di halaman posting pilih mode html jangan compose yah sob,,
untuk gaya 1

<div style="text-align: center;">
  <ul class="button">
    <li><a class="demo" href="http://awaknyo.blogspot.co.id/" target="_blank">Demo</a></li>
    <li><a class="download" href="http://awaknyo.blogspot.co.id/" target="_blank">Download</a></li>
  </ul>
</div>
<div class="clear"></div>

untuk gaya 2

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

ganti http://awaknyo.blogspot.co.id/ dengan link sobat

gimana kerenkan tombol demo flat uinya? silahkan diterapkan diblog anda dan pasang cssnya di <b:skin> disini </b:skin> atau di <style> disini </style>

kemudian htmlnya silahkan pasang di post artikel dibagian html bukan consule.
sekarang sudah jadi dan tampilan demo jadi keren, dan ringan serta responsive semoga bermanfaat.

Berbagi :