Cara Membuat Tombol Demo dan Download Flat UI 2 Style

Tutorial sites - Cara Membuat Tombol Demo dan Download Flat UI 2 Style sangat di sarankan bagi yang memiliki blog atau web yang suka men-share template. Tombol Demo dan  Download yang saya post kali ini merupakan salah satu dari sekian banyak tombol responsive, dan enak di pandang, jadi menambah daya tarik pengunjung blog maupun web anda, dan berikut tutorialnya :

  

• STYLE 1
• STYLE 2

Simak caranya sebagai berikut

1. Login Blog - Template - Edit HTML

2. Letakkan kode di bawah ini sebelum kode </head>

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

Jika sudah terpasang kode fontawesome di atas pada blog anda maka tidak perlu memasang yang ke-2 kalinya

3. Letakkan kode CSS yang anda inginkan di bawha ini sebelum kode ]]></b:skin> atau </style>

Style 1

/* CSS Button Style 1 by www.rumahmedia.id */
.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.rumahmedia.id */
.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

Untuk menggunakan fungsi tombol demo dan download di atas gunakan kode di bawah ini pada mode HTML postingan anda

Style 1

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

Ganti URL di atas dengan URL tujuan anda

Sekian Cara Membuat Tombol Demo dan Download Flat UI 2 Style semoga bermanfaat dan sampai berjumpa di postingan berikutnya...

sumber : rumahmedia.id