Cara Menciptakan Tombol Demo Dan Download Buton Yang Responsive Dalam Postingan

Cara Menciptakan 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 menciptakan pembaca tidak keberatan dan merasa nyaman di blog kamu. Ada dua cara yang dapat kau gunakan ketika melaksanakan uji coba menciptakan tombol download cara yang lazim kita dengar atau di baca memasukan isyarat script di dalam tema blog

Namun bagi kau yang agak kurang tertarik cukup mengunakan cara ini

1. Pertama kau masuk kemenu entri gres atau new Post dan masukan isyarat di bawah pada tamat atau tengah postingan artikel yang kau buat
2. Kembali pada hidangan Compose dan lihat hasilnya secara pribadi menyerupai 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 isyarat kedua tidak jauh berbeda silahkan lakukan hal yang sama menyerupai di atas dan pola 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 kau sudah dapat menjalankan atau mempublikasikan artikel kau selamat mencoba
Sumber https://keriboweb.blogspot.com/

    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 kau sudah dapat menjalankan atau mempublikasikan artikel kau selamat mencoba
Sumber https://keriboweb.blogspot.com/