Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara membuat tombol demo dan download buton yang responsive dalam postingan

Membuat sebuah tombol demo dan download yang responsive akan lebih baik dan sangat mempengaruhi loading sebuah blogspot atau website sehinga membuat pembaca tidak keberatan dan merasa nyaman di blog kamu. Ada dua cara yang bisa kamu gunakan saat melakukan uji coba membuat tombol download cara yang lazim kita dengar atau di baca memasukan kode script di dalam tema blog
membuat tombol download buton resvonsive

Namun bagi kamu yang agak kurang tertarik cukup mengunakan cara ini

1. Pertama kamu masuk kemenu entri baru atau new Post dan masukan kode di bawah pada akhir atau tengah postingan artikel yang kamu buat
2. Kembali pada menu Compose dan lihat hasilnya secara langsung seperti Contoh tombol dibawah ini






Kode Style Pertama
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
<style>
.keriboweb {
  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 */
.keriboweb:hover {
    background-color: #a5a6a7;
}
.keriboweb:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>
<br />
<center>
<a href="https://www.keriboweb.com" target="_blank">
<button class="keriboweb"><i class="fa fa-eye"></i> Demo</button></a>
<a href="https://www.keriboweb.com" target="_blank">
<button class="keriboweb"><i class="fa fa-download"></i> Download</button></a>
</center>
Selanjutnya untuk kode kedua tidak jauh berbeda silahkan lakukan hal yang sama seperti di atas dan contoh tombol di bawah ini







Kode Style kedua
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
<style>
.keriboweb1 {
    margin-right:9px;
    padding: 15px 25px;
    font-size: 24px;
    text-align: center;
    cursor: pointer;
    outline: none;
    color: #357ae8;
    background-color: #ffffff;
    border: solid;
    border-radius: 25px;
    box-shadow: 7px 0px #000;
}
.keriboweb1 span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.keriboweb1 span:after {
  content: '0bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.keriboweb1:hover span {
  padding-right: 25px;
}
.keriboweb1:hover span:after {
  opacity: 1;
  right: 0;
}
</style>
<br />
<center>
<a href="https://www.keriboweb.com/" target="_blank">
<button class="keriboweb1" style="vertical-align: middle;"><i class="fa fa-eye"></i><span>Demo</span></button></a>
<a href="https://www.keriboweb.com/" target="_blank">
<button class="keriboweb1" style="vertical-align: middle;"><i class="fa fa-download"></i><span>Download</span></button></a>
</center>


Setelah merasa cukup kamu sudah bisa menjalankan atau mempublikasikan artikel kamu selamat mencoba