Cara Membuat Tombol Demo dan Download Keren HTML

Cara Membuat Tombol Demo dan Download Keren HTML - Oke sobat untuk preview style pemasangan button download ini langsung bisa kalian lihat dibawah karna admin langsung memasangnya pada postingan ini

Nah untuk cara membuatnya melalui teknik pertama ini kita hanya perlu mengcopas kode dibawah ini dan meletakannya pada mode HTML postingan

• silahkan buka postingan kalian
• pergi ke MODE HTML
• Silahkan copy script dibawah
• Lalu pastekan di kolom mode html tersebut
• Kembali ke MODE Compose Lalu Lihat Hasilnya

#STYLE 1

KODE #STYLE 1

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/

4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
<style>
.kapanpakai {
  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 */
.kapanpakai:hover {
    background-color: #a5a6a7;
}
.kapanpakai:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>
<br />
<center>
<a href="https://kapanpakai.blogspot.com" target="_blank">
<button class="jagoankode"><i class="fa fa-eye"></i> Demo</button>

</a>
<a href="https://kapanpakai.blogspot.com" target="_blank">
<button class="jagoankode"><i class="fa fa-download"></i> 

Download</button></a>
</center>

KODE #STYLE 2

KODE #STYLE 2

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/

4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
<style>
.kapanpakai {
    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;
}
.kapanpakai1 span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.kapanpakai1 span:after {
  content: '0bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.kapanpakai1:hover span {
  padding-right: 25px;
}
.kapanpakai1:hover span:after {
  opacity: 1;
  right: 0;
}
</style>
<br />
<center>
<a href="https://kapanpakai.blogspot.com/" target="_blank">
<button class="jagoankode1" style="vertical-align: middle;">

<i class="fa fa-eye"></i><span>Demo</span></button></a>
<a href="https://kapanpakai.blogspot.com/" target="_blank">
<button class="jagoankode1" style="vertical-align: middle;">

<i class="fa fa-download"></i><span>Download</span></button></a>
</center>

Catatan :

Ganti Kode Yang berwarna Merah Dengan URL tujuan kalian

Oke sobat kode diatas akan berfungsi bila dipasang langsung didalam postingan., nah seperti yang sudah saya katakan memasangnya ada 2 cara, namun masing masing cara memiliki kelebihan dan kekurangan, kekurangan jika kalian menerapkan cara diatas adalah kalian harus memasukan kode diatas satu persatu didalam postingan, sesuai kebutuhan kalian tentunya. nah bagaimana jika kalian ingin menggunakan nya secara permanen dan otomatis .

kalian tentu bisa menerapkannya dan momodifikasi kode diatas dengan menerapkan font awesome diatas kode </head> serta menerapkan kode style css di atas kode </style> atau b:skin sedangkan untuk pemanggilan dipostingan kalian bisa menambahkan tag div dengan class yang dipanggil oleh contoh kode diatas, untuk instalasi pemasangan didalam template mungkin akan admin bahas dilain waktu.