Cara Menciptakan Tombol Download Jump Animasi

Jump Button Jump Bahasa Inggrisnya jikalau diartikan kedalam bahasa Indonesia artinya melompat. Seperti apa yang tertera pada Judul, tombol ini mempunyai keunikan adalah melompat-lompat, jikalau kita amati akan terlihat sangat unik dan kabar baiknya lagi menciptakannya hanya dengan menggunkan properti CSS.

Tentunya sudah Anda ketahui style pada tombol aneka macam dapat kita temukan di internet seperti Button Sosial Media melihat Flat UI Color , Color Button Awesome Modal Dialog , Coloured Buttons dan masih banyak lagi. Jika Anda ingin tau seberapa uniknya Anda dapat melihatnya dihalaman demo dengan menekan tombol demo dibawah ini :

Demo   CODE

Bagaimana unik bukan, jikalau Anda tertarik berikut ini langkah-langkahnya :

1. Login keakun blogger
2. Pilih Template > kemudian klik Edit HTML
3. Dengan memakai CTRL+F Anda cari kode ]]></b:skin>
4. Selanjutnya silahakan Anda copy instruksi dibawah ini dan pasangkan diatasnya atau sebelumnya.

/*Jump Button*/
@-webkit-keyframes bounce {
  0%,
  20%,
  53%,
  80%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.9);
  }
  40%,
  43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
            transform: translate3d(0, -30px, 0);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    box-shadow: 0 30px 30px rgba(0, 0, 0, 0.01);
  }
  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
            transform: translate3d(0, -15px, 0);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.5);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
            transform: translate3d(0, -4px, 0);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    box-shadow: 0 4px 4px rgba(4, 0, 4, 0.7);
  }
}
@keyframes bounce {
  0%,
  20%,
  53%,
  80%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.9);
  }
  40%,
  43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
            transform: translate3d(0, -30px, 0);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    box-shadow: 0 30px 30px rgba(0, 0, 0, 0.01);
  }
  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
            transform: translate3d(0, -15px, 0);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.5);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
            transform: translate3d(0, -4px, 0);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    box-shadow: 0 4px 4px rgba(4, 0, 4, 0.7);
  }
}
.bump {
  -webkit-animation: bounce 1s infinite;
          animation: bounce 1s infinite;
  -webkit-transform-origin: center bottom;
      -ms-transform-origin: center bottom;
          transform-origin: center bottom;
}
.bump:hover,
.bump:focus {
  -webkit-animation: none;
          animation: none;
}

5. Kemudian Anda cari instruksi </head> kemudian salin instruksi dibawah ini dan pasangnkan diatasnya .

<link href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css' rel='stylesheet prefetch'/>

6. Selanjutnya pemasangan HTML, Anda copy instruksi dibawah ini dan pastekan pada Entri gres Mode HTML.

<div class="container">
<div class="jumbotron">
<h1>
Jumpbutton</h1>
</div>
<button class="btn btn-primary bump">Bump</button></div>

Semoga bermanfaat!



Sumber http://www.websiteedukasi.com/