Posted by Aak
Aak-share.com Updated at: 3:14:00 PM

Cara Membuat Tombol Download Hover Text

No comments:
Cara Membuat Tombol Download Hover Text ~ Sobat Tentunya sudah tidak asing lagi dengan tombol Download memiliki banyak ragamamnya dengan berbagai Effect hover seperti Hover Button Background Image dan juga Button Sticky Font Awesome .



Pada Tombol Dwonload satu ini cukup sederhana dilengkapi dengan dengan effect hover teks, namun memiliki 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 kode 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, lalu salin kode 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!


Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments