Tombol Download Effect Hover Background Gambar

Hover Button Background Image - Banyak sekali tombol download yang sanggup kita temukan , dengan aneka macam fitur yang menarik . Pada tombol download berikut ini mempunyai fitur image dan hover . Anda sanggup menciptakan mengakibatkan image menjadi background pada tombol download .

Demo

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

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

/*Hover Button image*/
.container {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfk9iAiB1oApCZ46RjjgKnEKg_cDfMQEZuGIf1cCyo-5ENKy3-79hS_cp80uiPTWVbJE_EdTi3bGPLhOO1jdfljJpY_KdA-3Dbp6BeFNuHNe8o-AAyyA79Kasfj4K1THn4btVL4_vHA0M/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 aku beri warna abu-abu yaitu URL Image .
- Kode yang aku beri warna merah yaitu pengaturan format gambar dan pengaturan crop gambar .
- Pada format gambar anda sanggup memakai JPG, PNG, GIF .

Selanjutnya Anda menuju entri gres , salin aba-aba berikut dan terapakan pada Mode HTML

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

Publikasikan

Semoga bermanfaat!


Sumber http://www.websiteedukasi.com/