Posted by Aak
Aak-share.com Updated at: 4:17:00 PM

Cara membuat Tombol Download Jump Animasi

2 comments:
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.


Tentunya sudah Anda ketahui style pada tombol banyak sekali bisa kita temukan di internet seperti Button Sosial Media melihat Flat UI ColorColor Button Awesome Modal DialogColoured Buttons dan masih banyak lagi. Jika Anda penasaran seberapa uniknya Anda bisa melihatnya dihalaman demo dengan menekan tombol demo dibawah ini :


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!


Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

2 comments

Sesuai dengan judul memang gan.
Tombolnya memang unik

Balas

iya gan bisa lompat-lompat tombolnya ^_^

Balas