Cara Membuat Tombol Demo dan Download Flat UI Keren di Blog

 Pada postingan kali ini kembali saya akan berbagi tutorial kepada sobat semua, tutorial yang saya bagikan ini tutorial cara membuat tombol demo dan download flat UI keren di blog.

 Tombol demo dan download yang seperti ini biasanya digunakan blog blog yang menyediakan template gratis maupun yang berbayar sehingga menambah keindahan tampilan blog tersebut.

 Bagi sobat yang ingin menerapkan tombol demo dan download kedalam blog sobat, silahkan simak langkah langkah dibawah ini

Cara Membuat Tombol Demo dan Download Flat UI Keren di Blog

1. Langkah pertama masuk ke akun blogger sobat.
2. Klik tema » Edit HTML.
3. Tambahkan kode dibawah ini sebelum kode </head>.

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

Style 1 Tambahkan kode dibawah ini sebelum kode ]]></b:skin> atau </style>.

.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both;border: 1px solid rgba(0,0,0,0.1)}
.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:14px 48px 14px 16px;background:#303030;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}
.button li a.download{background:#f44336}
.button li a.demo:hover{background:#f44336}
.button li a.download:hover{background:#202020}
.button li a.demo:active,.button li a.download:active{cursor:pointer}
.button li a.demo: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:16px 24px;font-family:fontawesome;transition:all .3s}
.button li a.download:after{content:'f019';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}
.button li:hover a.demo:after,.button li:hover a.download:after{background:transparent;-webkit-animation:fadeinup .3s alternate ease infinite;animation:fadeinup .3s alternate ease infinite}
@-webkit-keyframes fadeinup{from{-webkit-transform:translateY(0)}to{-webkit-transform:translateX(3px)}}
@keyframes fadeinup{from{transform:translateX(0)}to{transform:translateY(3px)}}

Selanjutnya simpan tema

 Untuk bisa menggunakan tombol demo dan download flat UI tersebut maka sobat perlu menerapkan kode dibawah ini setiap sobat ingin menampilkan tombol demo dan download didalam postingn blog sobat.

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="https://www.tamboenman.xyz/" target="_blank">Demo</a></li>
<li><a class="download" href="https://www.tamboenman.xyz/" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear">
</div>

Ganti link yang ditandai diatas dengan link tujuan sobat.

Style 2 letakkan kode dibawah ini diatas kode ]]></b:skin> atau </style>.

.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)}}

Simpan tema

Untuk bisa menggunakan tombol demo dan download flat UI tersebut maka sobat perlu menerapkan kode dibawah ini setiap sobat ingin menampilkan tombol demo dan download didalam postingn blog sobat.

<div style="text-align: center;">
  <ul class="button2">
    <li><a class="demo" href="https://www.tamboenman.xyz" target="_blank">Demo Link</a></li>
    <li><a class="download" href="https://www.tamboenman.xyz" target="_blank">Download Link</a></li>
  </ul>
</div>
<div class="clear"></div>

Ganti url yang ditandai diatas dengan url tujuan sobat

Style 3 letakkan kode dibawah ini diatas kode ]]></b:skin> atau </style>.

.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'}

Simpan tema

 Untuk bisa menggunakan tombol demo dan download flat UI tersebut maka sobat perlu menerapkan kode dibawah ini setiap sobat ingin menampilkan tombol demo dan download didalam postingn blog sobat.

<div style="text-align: center;">
  <ul class="button">
    <li><a class="demo" href="https://www.tamboenman.xyz" target="_blank">Demo</a></li>
    <li><a class="download" href="https://www.tamboenman.xyz" target="_blank">Download</a></li>
  </ul>
</div>
<div class="clear"></div>

Ganti link yang ditandai diatas dengan link tujuan sobat.

Demikian sobat tutorial cara membuat tombol demo dan download flat UI, semoga postingan ini bermanfaat bagi sobat semua dan selamat mencoba.