Membuat Tombol / Button Demo & Download Keren Elegan

Hallo sob! Apa kabar! Semoga baik baik saja. untuk postingan kali ini saya akan memberikan tutorial Membuat Tombol / Button Demo & Download Keren Elegan. Pastinya sobat blogger udah gak asing lagi dengan namanya demo atau download. misalnya untuk kebutuhan review yaitu demo, mana mungkin cuma link demo aja, kan garing mending kita hias aja biar keren dan elegan. Dan link download juga sama harus keren atau kita buat kreatif / dihias dengan CSS biar nambah mantep.

Nah sobat blogger gak perlu nyari tombol keren sana sini mending disini aja lebih sederhana tapi keren dan enak dilihat pengunjungnya. Kalo kita lihat button yang lain mungkin kebanyakan agak terlalu rame atau lebay hehe maaf. barangkali ada yang gak suka tampilan yang rame-rame gitu. Oke sob kita langsung saja ke langkah-langkahnya.

Cara Membuat Tombol Demo & Download :

• Pertama sobat masuk ke akun Blogger
• Pilih Template, Edit Template.
• Kemudian sobat harus terapkan CSS Stylesheet Font Awesome, tepat diatas kode </head>

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

• Selanjutnya salin dan tempel script CSS berikut tepat diatas kode ]]></b:skin> atau </style>.

/* CSS Tombol Demo dan Download By Husni Mubarok*/
#wrap {
 margin:20px auto;
 text-align:center;
}
#wrap br {
 display:none;
}
.btn {
 display:inline-block;
 position:relative;
 font-family:'Source Sans Pro', Helvetica, sans-serif;
 background:#FF8C00;
 padding:6px 14px;
 font-size:14px;
 margin:0 3px;
 color:#fff!important;
 border-radius:3px;
 border:none;
 text-transform:uppercase;
 text-decoration:none;
 transition:all 0.3s ease-out;
}
.btn.down {
 background:#28a1f0;
 color:#fff!important;
}
.btn.down:hover,.btn.down:active,.btn:hover,.btn:active {
 background:#3b3f48;
 color:#fff;
}
a.btn.down:hover,a.btn.down:active,a.btn:hover,a.btn:active {
 color:#fff;
}
.btn i {
 margin-left:10px;
 font-weight:normal;
 font-family:FontAwesome;
}

• Selesai, Save Template.

Cara Menggunakannya :

• Cara menggunakannya memang cukup simpel.
• Sobat terapkan dipostingan pilih bagian HTML bukan Compose, Lalu tempel script berikut.

<div id="wrap">
<a href="#" class="btn" rel="nofollow" target="_blank">Live Demo <i class="fa fa-paper-plane"></i></a>

<a href="#" class="btn down" rel="nofollow" target="_blank">Download <i class="fa fa-download"></i></a>
</div> 

• Selanjutnya ganti "#" menjadi link tujuannya.
• Selesai.

Lihat Hasilnya :

Live Demo Download

Gimana sob? keren gak? hehe ya pasti lah keren dan elegan.

Sekian tutorial Membuat Tombol / Button Demo & Download Keren Elegan. Semoga bermanfaat bagi yang menggunakannya dan selamat mencoba :)