Cara membuat tombol download dan demo Flat UI keren dengan mudah

Cara-membuat-tombol-download-dan-demo-keren.png


Pada kesempatan kali ini, Mas arif akan membagikan sebuah tutorial, Cara membuat tombol download dan demo keren  dengan mudah.

Seperti yang kita ketahui, tombol download dan demo ini sangat bermanfaat untuk situs-situs yang membahas tentang film,musik, games DLL.

Untuk tampilan tombol download dan demo ini sangat bagus dan keren, yang tentunya akan membuat kalian suka, tampilan tombol download ini menggunakan flat UI yang dimana tampilan nya terlihat menarik, yuk simak dibawah ini untuk membuat nya.

Cara membuat tombol download dan demo keren  dengan mudah

Sebelum membuat nya, saya ingin bilang terlebih dahulu, tampilan widget ini menggunakan font awesome, jadi kalian harus menambahkan link CSS terlebih dahulu.

Langkah 1 : kalian masuk ke Blogger > Template > Edit HTML.

Langkah 2 : Pastika anda sudah ada kode font awesome, jika tidak ada kalian bisa tambahkan kode font awesome tersebut, caranya adalah kalian coppy kode dibawah ini, lalu pastekan kode tersebut di atas kode </head>.

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

Langkah 3 : setelah kalian tambahkan kode tersebut, maka langkah selanjutnya adalah kalian coppy kode dibawah ini, lalu pastekan kode tersebut diatas kode ]]></b:skin>.

 /* CSS Button Style 2 by www.masarif.xyz */
.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)}}

Langkah 4 : kemudian kalian simpan template nya.

Langkah 5 : langkah selanjutnya adalah penggunaan nya, untuk menggunakan tombol download dan demo, kalian tinggal tambah kode dibawah di postingan kalian.

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

Penting : Ganti URL https://www.masarif.xyz dengan URL website kalian.
Sampai sini, kalian sudah berhasil membuat tombol download dan demo tersebut.

Itulah Cara membuat tombol download dan demo keren  dengan mudah, semoga dengan adanya artikel ini, dapat membantu kalian semua.
Buka Komentar

0 Response to "Cara membuat tombol download dan demo Flat UI keren dengan mudah"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel