Cara Menciptakan Tombol Demo Dan Download Flat Ui Keren

Cara Praktis Membuat Tombol Demo dan Download Flat UI Keren - Pada tutorial kali ini Admin akan membuatkan tutorial Cara Membuat Tombol Demo dan Download Flat UI Yang Keren dengan aksesori icon Font Awesome.

Tombol Demo atau Download Button sangat di perlukan oleh seorang blogger, Tombol Download biasa di gunakan membungkus link download atau demo dan yang lainya.

Apalagi Jika Anda memiliki blog berisikan Template blog, app atau lagu bahkan video, yang terang niscaya akan memerlukan tombol demo dandownload buat para pengunjung.

Jika anda ingin biar tampilan link demo dan download anda lebih menarik dan keren maka anda perlu melanjutkan membaca artikel ini hingga selesai.

Mungkin anda lebih suka untuk menciptakan link demo dan download yang keren dan menarik untuk memudahkan pengunjung untuk mengetahui link demo dan downloadnya.

Cara menciptakan Tombol Demo dan Download sangat gampang dan sederhana.

1. Buka atau login Blogger sahabat terlebih dahulu
2. Klik sajian Tema, kemudian Edit HTML
3. Kemudian tambahkan arahan dibawah sebelum arahan ]]></b:skin> atau </style>. Jika ingin lebih gampang mencari arahan di samping tekan CTRL + F dan cari arahan di samping.

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

4. Setelah itu Simpan Tema
5. Sekarang untuk dapat memakai tombol download dan demo maka silakan terapkan arahan dibawah setiap anda ingin menampilkan tombol demo dan download

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

Ganti link yang aku tandai di atas dengan link tujuan sobat

6. lihat hasilnya

• Result

Jika fontawesome tidak muncul tambahkan arahan dibawah ini sebelum arahan </head> dan jangan lupa di simpan ya...

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

Selesai... Cukup sekian tutorial yang dapat aku bagikan. Semoga dapat membantu dan bermanfaat.
Sumber https://www.denylistianto.com/

Bagikan Artikel ini