Cara Membuat Jelly Button Keren & Stylish di Blogger

Kali ini saya akan berbagi tutorial bagaimana caranya membuat dan memasang Jelly Button, sebuah tombol Demo dan Download yang sangat keren dan Stylish banget!

Jika dilihat sekilas, gak ada yang istimewa sama sekali. Namun ketika diklik, baru terlihat sisi menarik dari Jelly Button ini. Penasaran? Ada di bawah.

Cara Membuat Jelly Button Keren & Stylish di Blogger

Masuk ke Blogger > Tema > Edit HTML

Simpan kode CSS yang diperlukan di bawah ini, di atas kode </style> atau </b:skin>

body {
  background: #f1c40f;
}

.button {
  background: #3498db;
  width: 180px;
  padding: 4px 0;

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  border-radius: 3px;

  p {
    font-family: 'Roboto';
   text-align: center;
   text-transform: uppercase;
    color: #FFF;
    user-select: none;
  }

  &:hover {
    cursor: pointer;
  }

  &:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 10%;
    border-radius: 50%;
    background-color: darken(#f1c40f, 20%);
    opacity: 0.4;
    bottom: -30px;
  }
}

Selanjutnya simpan JavaScript (Js) Jelly Button di bawah ini, di atas </head>. Apabila gagal, coba simpan di atas kode </body>

var $button = document.querySelector('.button');
$button.addEventListener('click', function() {
  var duration = 0.3,
      delay = 0.08;
  TweenMax.to($button, duration, {scaleY: 1.6, ease: Expo.easeOut});
  TweenMax.to($button, duration, {scaleX: 1.2, scaleY: 1, ease: Back.easeOut, easeParams: [3], delay: delay});
  TweenMax.to($button, duration * 1.25, {scaleX: 1, scaleY: 1, ease: Back.easeOut, easeParams: [6], delay: delay * 3 });
});

Terakhir, bagaimana cara pemanggilannya? Yap, gunakan HTML khusus di bawah ini:

<link rel="stylesheet" href="//brick.a.ssl.fastly.net/Roboto:400"/>

<div class="button">
  <p>Click me</p>
</div>

Untuk pemanggilan HTML dari Jelly Button keren dan Stylish ini, masuk ke mode tulis HTML, - bukan Compose seperti biasanya.

Itu dia cara membuat dan memasang Jelly Button, tombol Demo dan Download yang sangat keren dan Stylish banget!