Adsense

5 Style Tombol Demo dan Tombol Download di Halaman Postingan Blog

if.Blogger | 20.1.18
Tips Desain blog lagi ingin aku bagikan melalui artikel ini. Lagi-lagi tentang style blog, lagi-lagi tentang utak-atik blog. Ya, karena lagi senang-senangnya mainin kode HTML dan javacript. Ibarat anak kecil yang lagi waktunya untuk bermain-main, maka aku pun begitu adanya. Pengen mainin aja kode-kode script yang unik dan merasa puas dengan hasil dari utak-atik kode scriptnya "orang'.

Weh jadi ngelantur gak jelas. Ok Sobat blogger yang nyasar ke artikel ini. Aku ingin membagikan 5 (lima) style Tombol Demo dan Tombol Download yang source kodenya aku dapatkan dari suhu-suhu blogger yang mumpuni. Aku publikasikan lagi dengan caraku sendiri, agar bermanfaat untuk blogger lain dan bagi diriku sendiri. Diarsipkan agar tidak mencari-cari lagi kode scriptnya ketika lagi membutuhkan teknik ini.

Apa sih Tombol Demo dan Tombol Download? Yakni dua jenis tombol yang umum ditemukan di website atau blog, terutama pada situs web atau blog yang sering membagikan tutorial, membagikan template, dan aplikasi smartphone. Tombol Download sering digunakan untuk memulai proses pengunduhan dari server ke perangkat pengguna, sementara Tombol Demo biasanya digunakan untuk melihat tampilan atau contoh dari suatu produk atau fitur sebelum pengguna menerapkannya atau mengunduhnya.

Tanpa berlama-lama menjelaskannya, yuk kita langsung praktekkan saja di blog.

1. Tombol Demo dan Tombol Download #Style1

Lihat demo tombolnya sebelum menerapkannya di blog.



Sebelum menerapkannya pastikan blog Anda sudah terpasang font awesome, jika belum silahkan copy paste dan letakkan kode berikut tepat sebelum tag penutup </head>.

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"/>

CSS #Style1, tempatkan sebelum ]]></b:skin>
<style>
.btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important}
.btn ul {margin:0;padding:0}
.btn li{display:inline;margin:5px;padding:0;list-style:none;}
.demo,.download{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out}
.demo {background-color:#3498DB;}
.download {background-color:#1ABC84;}
.demo:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;}
.download:hover {background-color:#49DDAA;color:#fff;border-bottom:2px solid #1ABC84;opacity:1;}
.demo:before {content:&#39;\f135&#39;;display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.download:before {content:&#39;\f019&#39;;display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
</style>

HTML #Style1, tempatkan dalam halaman postingan
<div style="text-align: center;">
<ul class="btn">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank"><i class="fa fa-search" aria-hidden="true"></i> DEMO</a></li>
<li><a class="download" href="YOUR-LINK-HERE" target="_blank"><i class="fa fa-download" aria-hidden="true"></i> DOWNLOAD</a></li>
</ul>
</div>

2. Tombol Demo dan Tombol Download #Style2

Lihat demo tombolnya sebelum menerapkannya di blog.



HTML #Style2, tempatkan dalam halaman postingan
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
<style>
.ifblogbutton {
  margin-right:9px;
  padding: 15px 25px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #009688;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #000;
}
/* Darker background on mouse-over */
.ifblogbutton:hover {
    background-color: #a5a6a7;
}
.ifblogbutton:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>
<br />
<center>
<a href="#" target="_blank">
<button class="ifblogbutton"><i class="fa fa-eye"></i> Demo</button></a>
<a href="#" target="_blank">
<button class="ifblogbutton"><i class="fa fa-download"></i> Download</button></a>
</center>

Kode diatas paling simple jika langsung diterapkan di halaman postingan blog, tetapi jadi ribet jika dilakukan berulang-ulang dengan copy paste kode TML dan CSS yang panjang. Saranku, jika mau simple, silakan utak atik kode script ini, pisahkan CSS dan HTML-nya, sesuaikan dengan HTML blog kalian.

3. Tombol Demo dan Tombol Download #Style3

Lihat demo tombolnya sebelum menerapkannya di blog.



Sebelum menerapkannya pastikan blog Anda sudah terpasang font awesome versi 4.0.3, jika belum silahkan copy paste dan letakkan kode berikut tepat sebelum tag penutup </head>.

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

CSS #Style3, tempatkan sebelum ]]></b:skin>
<style>
#wrap { margin:20px auto; text-align:center; }
#wrap br { display:none; }
.bie-slide,.bie-slide2 { position:relative; display:inline-block; height:50px; width:200px; line-height:50px; padding:0; border-radius:50px; background:#fdfdfd; border:2px solid #F9690E; margin:10px; transition:.5s; }
.bie-slide2 { border:2px solid #36D7B7; }
.bie-slide:hover { background-color:#F9690E; }
.bie-slide2:hover { background-color:#36D7B7; }
.bie-slide:hover span.circle,.bie-slide2:hover span.circle2 { left:100%; margin-left:-45px; background-color:#fdfdfd; color:#F9690E; }
.bie-slide2:hover span.circle2 { color:#36D7B7; }
.bie-slide:hover span.title,.bie-slide2:hover span.title2 { left:40px; opacity:0; }
.bie-slide:hover span.title-hover,.bie-slide2:hover span.title-hover2 { opacity:1; left:40px; }
.bie-slide span.circle,.bie-slide2 span.circle2 { display:block; background-color:#F9690E; color:#fff; position:absolute; float:left; margin:5px; line-height:42px; height:40px; width:40px; top:0; left:0; transition:.5s; border-radius:50%; }
.bie-slide2 span.circle2 { background-color:#36D7B7; }
.bie-slide span.title,.bie-slide span.title-hover,.bie-slide2 span.title2,.bie-slide2 span.title-hover2 { position:absolute; left:90px; text-align:center; margin:0 auto; font-size:16px; font-weight:bold; color:#F9690E; transition:.5s; }
.bie-slide2 span.title2,.bie-slide2 span.title-hover2 { color:#36D7B7; left:80px; }
.bie-slide span.title-hover,.bie-slide2 span.title-hover2 { left:80px; opacity:0; }
.bie-slide span.title-hover,.bie-slide2 span.title-hover2 { color:#fff; }
</style>

HTML #Style3, tempatkan dalam halaman postingan
<div id="wrap" style="text-align: center;">
<a class="bie-slide" href="#" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Klik Disini</span>
</a>
<a class="bie-slide2" href="#" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Klik Disini</span>
</a>
</div>

4. Tombol Demo dan Tombol Download #Style4

Lihat demo tombolnya sebelum menerapkannya di blog.



Sebelum menerapkannya pastikan blog Anda sudah terpasang font awesome versi 4.5.0, jika belum silahkan copy paste dan letakkan kode berikut tepat sebelum tag penutup </head>.

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

CSS #Style4, tempatkan sebelum ]]></b:skin>
<style>
.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;
}

.button li a.demo,
.button li a.download {
  position: relative;
  padding: 9px 48px 9px 16px;
  background: #f39c12;
  color: #fff!important;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 3px;
  box-shadow: 0 1px rgba(0, 0, 0, 0.1);
  line-height: normal;
  transition: all .3s;
}

.button li a.download {
  background: #3498db;
}

.button li a.demo:hover,
.button li a.download:hover {
  background: #666;
}

.button li a.demo:active,
.button li a.download:active {
  cursor: pointer;
}

.button li a.demo:after,
.button li a.download: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: 11px;
  font-family: fontawesome;
}

.button li a.download:after {
  content: '\f019';
}
</style>

HTML #Style4, tempatkan dalam halaman postingan
<div style="text-align: center;">
  <ul class="button">
    <li><a class="demo" href="#" target="_blank">Demo</a></li>
    <li><a class="download" href="#" target="_blank">Download</a></li>
  </ul>
</div>

5. Tombol Demo dan Tombol Download #Style5

Lihat demo tombolnya sebelum menerapkannya di blog.



Sebelum menerapkannya pastikan blog Anda sudah terpasang font awesome versi 4.5.0, jika belum silahkan copy paste dan letakkan kode berikut tepat sebelum tag penutup </head>.

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

CSS #Style5, tempatkan sebelum ]]></b:skin>
<style>
.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);
  }
}
</style>

HTML #Style5, tempatkan dalam halaman postingan
<div style="text-align: center;">
  <ul class="button2">
    <li><a class="demo" href="#" target="_blank">Demo Link</a></li>
    <li><a class="download" href="#" target="_blank">Download Link</a></li>
  </ul>
</div>

Dari 5 style tombol Demo dan Tombol Download, versi yang manakah menurut kalian lebih keren?

Tags

Posting Komentar

0 Komentar

Stop Komentar SPAM
Berkomentarlah dengan Sopan
Salam Anak Bangsa