Cara Menciptakan Tombol Download Hover Text

Cara Membuat Tombol Download Hover Text Sobat Tentunya sudah tidak gila lagi dengan tombol Download mempunyai banyak ragamamnya dengan banyak sekali Effect hover seperti Hover Button Background Image dan juga Button Sticky Font Awesome .

Demo   CODE

Pada Tombol Dwonload satu ini cukup sederhana dilengkapi dengan dengan effect hover teks, namun mempunyai tampilan background cukup menarik. Bagi Anda yang tertarik berikut ini caranya :

1. Login Keakun blogger
2. Pilih Template > klik Edit HTML
3. Selanjutnya Anda cari kode ]]></b:skin>
4. Kemudian copy instruksi dibawah ini dan pastekan diatasnya :

.button:first-child{
  margin-top:20%;

}
.button{
  width:50%;
  height:50px;
  margin:20px auto;
  background-color:#0e885c;
  text-align:center;
  font-size:2em;
  line-height:48px;
  cursor:pointer;
  overflow:hidden;
  position:relative;
}
.link{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:2;
  transition:color 0.3s ease-out 0.1s;
  border:1px solid #0e885c;
  color:#0e885c;
}
/*create curved background*/
.circle-bg{
  position:absolute;
  border-radius: 50%;
  width: 120%;
  padding-bottom: 120%;
z-index:1;
    Works without fixed size */
top:50%;left:50%;
transform: translate(-50%, -50%);
}
.circle-bg:after{
  content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:#37545A;
border-radius:50%;
  transition:transform 0.5s ease-out;
}
.wrapper{
  position:relative;
  width:100%;
  height:100%;
}

.button:hover .circle-bg:after{
   transform:scale(0.0);
}
.button:hover .link{
  color:#FFF;
}

5. Simpan Template
6. Kemudian Anda menuju Entri baru, kemudian salin instruksi dibawah ini dan terapkan pada Mode HTML

<div class="button">
  <div class="circle-bg">
<div class="wrapper">
</div>
</div>
<div class="link">
Button</div>
</div>
<div class="button">
  <div class="circle-bg">
<div class="wrapper">
</div>
</div>
<div class="link">
Button</div>
</div>
<div class="button">
  <div class="circle-bg">
<div class="wrapper">
</div>
</div>
<div class="link">
Button</div>
</div>

7. Publikasikan

Semoga bermanfaat!



Sumber http://www.websiteedukasi.com/