Cara Menciptakan Tombol Download Lighbox

Cara Membuat Tombol Download Lighbox Hallo Sobat..., kembali lagi bersama Aak. Pastinya sahabat sudah tidak aneh lagi dengan Lighbox menyerupai sebelumnya suda aku ulas yaitu membuat Gambar/Image Lightbox Dengan Efek Transisi.

Demo   CODE

Sedikit akan aku jelaskan Lighbox ialah halaman yang akan terbuka dikala cursor berada diatas tombol atau dikala tombol dihover. Pada tombol ini mempunyai effect balik dikala cursor berada diatas tombol, anda tertarik berikut ini caranya :

Silahkan buka Editor Template, kemudian Anda cari kode ]]></b:skin> kemudian salin isyarat dibawah ini dan pasangkan diatasnya atau sebelumnya .

:root .contain {
  background: white;
  box-shadow: 0 2px 2px #499efc;
  color: #111;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 3em;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
  position: relative;
}
:root .contain + .contain {
  margin-top: 3em;
}

@-webkit-keyframes close-before {
  0% {
    margin-top: 0;
  }
  100% {
    margin-top: -10px;
  }
}

@keyframes close-before {
  0% {
    margin-top: 0;
  }
  100% {
    margin-top: -10px;
  }
}
@-webkit-keyframes close-after {
  0% {
    margin-top: -10px;
  }
  100% {
    margin-top: 0px;
  }
}
@keyframes close-after {
  0% {
    margin-top: -10px;
  }
  100% {
    margin-top: 0px;
  }
}
:root {
  box-sizing: border-box;
  font-family: 'Oswald', Arial, sans-serif;
  font-size: 20px;
}
:root * {
  box-sizing: border-box;
}
:root *:before, :root *:after {
  box-sizing: inherit;
}
.vimeo-launch {
  background: white;
  border: none;
  box-shadow: inset 0 0 0 4px white, inset 0 0 0 8px #62abfc;
  color: #3091fb;
  display: block;
  margin: 0 auto;
  overflow: hidden;
  padding: 30px;
  position: absolute;
  text-transform: uppercase;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.vimeo-launch:before, .vimeo-launch:after {
  content: attr(data-label);
  display: block;
  height: 100%;
  padding: 30px;
  position: absolute;
  left: 0;
  right: 0;
  -webkit-transition: 250ms top;
          transition: 250ms top;
}
.vimeo-launch:before {
  background: white;
  box-shadow: inset 0 0 0 4px white, inset 0 0 0 8px #62abfc;
  color: #3091fb;
  top: 0;
}
.vimeo-launch:after {
  background: #62abfc;
  box-shadow: inset 0 0 0 4px #62abfc, inset 0 0 0 8px white;
  color: white;
  top: 100%;
}
.vimeo-launch:hover:before {
  top: -100%;
}
.vimeo-launch:hover:after {
  top: 0;
}

#vimeo-pop-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999999;
  background: rgba(0, 0, 0, 0.75);
}
#vimeo-pop-container div {
  height: 450px;
  width: 800px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
#vimeo-pop-container .vimeo-close {
  background-color: transparent;
  border: 3px solid white;
  cursor: pointer;
  margin-bottom: 10px;
  height: 30px;
  width: 30px;
  position: absolute;
  bottom: 100%;
  right: 0;
  -webkit-transition: 200ms background-color;
          transition: 200ms background-color;
}
#vimeo-pop-container .vimeo-close:before, #vimeo-pop-container .vimeo-close:after {
  content: '';
  background: white;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: 500ms all;
          transition: 500ms all;
}
#vimeo-pop-container .vimeo-close:before {
  height: 20px;
  width: 2px;
  margin-left: -1px;
  margin-top: -10px;
}
#vimeo-pop-container .vimeo-close:after {
  height: 2px;
  width: 20px;
  margin-left: -10px;
  margin-top: -1px;
}
#vimeo-pop-container .vimeo-close:hover {
  background-color: rgba(0, 0, 0, 0.25);
}
#vimeo-pop-container .vimeo-close.closing:before {
  -webkit-transform: rotate(450deg);
      -ms-transform: rotate(450deg);
          transform: rotate(450deg);
  margin-left: -2px;
  margin-top: 0;
  -webkit-animation: close-before 500ms ease 500ms 1 forwards;
          animation: close-before 500ms ease 500ms 1 forwards;
}
#vimeo-pop-container .vimeo-close.closing:after {
  -webkit-transform: rotate(540deg);
      -ms-transform: rotate(540deg);
          transform: rotate(540deg);
  margin-left: -11px;
  margin-top: -10px;
  -webkit-animation: close-after 500ms ease 500ms 1 forwards;
          animation: close-after 500ms ease 500ms 1 forwards;
}
#vimeo-pop-container iframe {
  border: 6px solid white;
  height: 100%;
  width: 100%;
}

Selanjutnya Anda cari isyarat </head> atau body, kemudian copy isyarat dibawah ini dan pastekan diatasnya.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" />

Catatan: Apabila di template Anda sudah terinstall isyarat diatas maka lewati langkah tersebut.

Masih pada isyarat </body> silahkan Anda salin isyarat dibawah ini dan pasangkan diatasnya atau sebelumnya.

<script type="text/javascript">
$('body').on('click', '.vimeo-launch', function () {
    var videoID = $(this).data('vimeo-id'), $video = '<div id="vimeo-pop-container"><div><span class="vimeo-close"></span><iframe src="http://player.vimeo.com/video/' + videoID + '/?title=1&amp;byline=1&amp;portrait=0&amp;autoplay=1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></div>';
    $('body').append($video);
}).on('click', '.vimeo-close', function () {
    $(this).addClass('closing');
    $('#vimeo-pop-container').delay(700).animate({ /*pengaturan waktu putaran pada tombol*/
        height: 0,
        top: '50%'
    }, 'fast', function () {
        $('#vimeo-pop-container').remove();
    });
});
</script>

Untuk pemasangan HTML, Anda menuju Entri gres kemudian salin isyarat dibawah ini dan pasangkan pada Mode HTML.

<a href="URL Tujuan" class="vimeo-launch" data-label="Isikan data label Anda disini" data-vimeo-id="91578623" >
Isikan kembali Label Anda disini
</a>

Semoga bermanfaat!




Sumber http://www.websiteedukasi.com/