Cara Membuat Tombol Demo dan Download dengan Font Awesome

Cara Membuat Tombol Demo dan Download dengan Font Awesome

Kali ini saya akan membagikan tutorial cara membuat tombol demo dan download dengan font awesome. Untuk Anda yang biasa membagikan sesuatu melalui blog pastinya memerlukan tombol demo dan download. Entah itu berbagi template, software, film, dan hal lain yang dapat dibagikan.

Tampilan tombol demo dan download yang saya bagikan ini sangat menarik, karena terdapatnya font awesome pada tombol tersebut. Berikut demo tombol demo dan download dengan Font Awesome:

Oke nggak usah kebanyakan basa-basi, cara membuatnya gampang banget. Langsung aja ikuti langkah-langkah di bawah ini.

Cara Membuat Tombol Demo dan Download dengan Font Awesome

1. Masuk ke Blogger > Template > Edit HTML
2. Pastikan di blog Anda terdapat script pemanggil css style font awesome seperti di bawah ini yang terletak di atas kode </head>. Jika tidak ada, silahkan Letakkan script pemanggil CSS style font awesome di bawah ini di atas kode </head> atau bisa juga menggunakan cara optimasi css font awesome.

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

3. Letakkan kode CSS di bawah ini di atas kode ]]></b:skin> atau </style>

/* CSS Button */
.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;}
.demo {opacity:1;padding:7px 14px!important;background:#2e88c7;color:#fff!important;font-weight:400;font-size:15px;font-family:'Oswald',sans-serif;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;background-image: linear-gradient(to bottom, #2e88c7, #2570a4);box-shadow:inset 0 0 0 1px rgba(0,0,0,0.4), 0 0 0 1px #4a4e59;transition:opacity 0.4s ease-in-out;}
.download {opacity:1;padding:7px 14px!important;background:#fe4e3f;color:#fff!important;font-weight:400;font-size:15px;font-family:'Oswald',sans-serif;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;background-image: linear-gradient(to bottom, #e9665b, #d54135);box-shadow:inset 0 0 0 1px rgba(0,0,0,0.4), 0 0 0 1px #4a4e59;transition:all 0.4s ease-in-out;}
.demo:hover {background-image: linear-gradient(to bottom, #2e88c7, #20608d);transition:all .4s ease-in-out;}
.download:hover {background-image: linear-gradient(to bottom, #e9665b, #bd3a2f);transition:all .4s ease-in-out;}
.demo:active {cursor:pointer;background-image: linear-gradient(to bottom, #20608d, #2e88c7);transition:all .4s ease-in-out;}
.download:active {cursor:pointer;background-image: linear-gradient(to bottom, #bd3a2f, #e9665b);transition:all .4s ease-in-out;}
.demo:before {content:'f135';display:inline-block;vertical-align:top;margin-right:10px;
width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
.download:before {content:'f019';display:inline-block;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}

4. Simpan template.
5. Untuk penggunaannya, silahkan gunakan kode berikut ini ketika membuat posting (gunakan mode HTML)

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

Sekian tutorial cara membuat tombol demo dan download dengan font awesome. Semoga tutorial ini bermanfaat, Aamiin. Selamat menerapkan.

Leave a Reply