Kredit Instant hingga 30 Juta!
Trading dengan Broker Terbaik

Cara membuat Button dengan Effect Jinggle menggunakan CSS

7 September 2018 ()

Hai! Berikut ini adalah Cara untuk membuat Button dengan Effect Jingle menggunakan CSS :


  • Buka Menu Themes, kemudian klik Edit HTML.
  • Tambahkan Kode ini sebelum Kode </b:skin>
  • Untuk memudahkan pencarian tekan Crtl dan F, ketik </b:skin> dan tekan Enter.
.built2bless-jingle-button {width: 180px; height: 60px;overflow: hidden;position: relative;cursor: pointer;margin: 10px;border-radius: 5px;text-align: center;box-shadow: 0 0 8px;} .built2bless-jingle-button-inside {background: #ff6600;font-size: 15px;text-align: center;color: #fff; position: absolute;top: 3px;left: 3px;} .built2bless-jingle-button-inside a{color: #fff; } .built2bless-jingle-button .built2bless-jingle-button-inside {width: 173px;line-height: 54px;border-radius: 5px;} .built2bless-jingle-button-effect {animation: jiggle 1.3s ease-in infinite;} @keyframes jiggle { 54%, 68% {transform: scale(1.0, 1.0)} 56% {transform: scale(1.2, 0.8)} 62% {transform: scale(0.8, 1.2) translate(0, -5px)} 65% {transform: scale(1.0, 1.0) translate(0, -3px)}} @keyframes built2bless-jingle-button-effect{ 0% {transform: translateX(0px) ;}100% {transform: translateX(-400px) ;}}
  • Dan Gunakan Kode ini Menampilkan Button dengan Effect Jinggle :
<div class="built2bless-jingle-button built2bless-jingle-button-effect"><div class="built2bless-jingle-button-inside"><a href="URL / Link Anda" target="_blank">Nama Button</a></div>
</div>
  • Contoh Hasil :
  • Ganti Bagian URL / Link Anda dengan URL / Link Tujuan
  • Dan Ganti Nama Button sesuai Nama Button Anda.

Semoga Bermanfaat, Happy Blogging :)

Tags : Blogger CMS (Content Management System)