Trading dengan Broker Terbaik

Blog dapat menampilkan iklan secara random, abaikan jika melihat iklan Binary Options seperti Binomo dan sejenisnya.

Cara Membuat Button dengan Effect Jinggle menggunakan CSS

Berikut 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">Nama Button</a></div>
</div>

  • Contoh Hasil :


  • Ganti Bagian URL / Link Anda dengan URL / Link Tujuan Jinggle Button.
  • Dan Ganti Nama Button sesuai Nama Button Anda.

Semoga Bermanfaat :)

Published at September 2018
Tags : Blogger CMS (Content Management System)

CONVERSATION