Cara membuat Tombol Download Jump Animasi

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

Button Sosial Media melihat Flat UI Color , Color Button Awesome Modal Dialog , Coloured Buttons dan masih banyak lagi. Jika Anda penasaran seberapa uniknya Anda bisa melihatnya dihalaman demo dengan menekan tombol demo dibawah ini :

Demo   CODE

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

1. Login keakun blogger
2. Pilih Template > lalu klik Edit HTML
3. Dengan menggunakan CTRL+F Anda cari kode ]]></b:skin>
4. Selanjutnya silahakan Anda copy kode 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 kode </head> lalu salin kode 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 kode dibawah ini dan pastekan pada Entri baru Mode HTML.

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

Semoga bermanfaat!

Bagikan Artikel ini