Membuat Tombol / Button Demo & Download Keren Elegan

RaBiitch Official - Pada Artikel yang anda baca kali ini dengan judul Membuat Tombol / Button Demo & Download Keren Elegan, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel blogger, Artikel css, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca artikel kami yang berjudul Membuat Tombol / Button Demo & Download Keren Elegan
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 :
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 :)


Demikian penjelasan mengenai Membuat Tombol / Button Demo & Download Keren Elegan dan seperti biasa silahkan tinggalkan apa pendapat kalian di kolom komentar mengenai Membuat Tombol / Button Demo & Download Keren Elegan

Bagikan : https://www.rabiitch.me/2018/07/membuat-tombol-button-demo-download.html

0 Response to "Membuat Tombol / Button Demo & Download Keren Elegan"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel