Posted by Aak
Aak-share.com Updated at: 10:11:00 PM

Tombol Download Effect Hover Background Gambar

No comments:
Hover Button Background Image - Banyak sekali tombol download yang bisa kita temukan , dengan berbagai fitur yang menarik . Pada tombol download berikut ini memiliki fitur image dan hover . Anda dapat membuat menjadikan image menjadi background pada tombol download .



Pada background image Anda bisa mengatur ukurannya sesuai keinginan Anda , untuk membuatnya berikut ini langkah-langkahnya :

Salin kode CSS dibawah ini, kemudian terapakan diatas atau sebelum kode ]]></b:skin>

/*Hover Button image*/
.container {
  background-image: url(http://4.bp.blogspot.com/-qNqcIlAgYBo/VMW-hJn8yBI/AAAAAAAAJ0Y/tw4ei32mgus/s1600/background.png?dpr=2&fit=crop&fm=png&h=500&q=75&w=500);
  background-size: contain;
  background-repeat: no-repeat;
  width: 700px;
  height: 600px;
  margin-top: 10px;
  position: relative;
  overflow: hidden;
  border: 2px solid #666;
}

button:hover:after {
  -webkit-animation: sheen 1s forwards;
}

button {
  color: #000;
  background: -webkit-gradient(linear, 0% top, 100% bottom, from(#fff), to(#f9f));
  font-family: 'Days One', sans-serif;
  font-size: 28px;
  border: 10px solid rgba(0,0,0,1);
  border-radius: 0.5em 1em 1em;
  padding: 0.5em 1.5em;
  position: absolute;
  left: 50%;
  top: 50%;
  overflow: hidden;
  -webkit-transform: translate(-50%, -50%);
}

button:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

button:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

button:hover {
  cursor: pointer;
  background-image: -webkit-gradient(linear, 0% top, 100% bottom, from(#dcdcdc), to(#5553FF));
}

Penjelasan :
- Kode yang saya beri warna abu-abu adalah URL Image .
- Kode yang saya beri warna merah adalah pengaturan format gambar dan pengaturan crop gambar .
- Pada format gambar anda bisa menggunakan JPG, PNG, GIF .

Selanjutnya Anda menuju entri baru , salin kode berikut dan terapakan pada Mode HTML

<div class="container">
<a href="URL Tujuan" target="_blank">
<button>Dowonload</button></a></div>

Publikasikan

Semoga bermanfaat!

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments