Cara Menambahkan Tombol Lampu Neon Animasi di Blogger

Cara Menambahkan Tombol Lampu Neon Animasi di Blogger

Halo semuanya, selamat datang di suyachan.my.id, dalam postingan ini saya akan menunjukkan kepada AndaCara Menambahkan Tombol Lampu Neon Animasi di Blogger.

Fitur Tombol Lampu Neon Animasi

jadi begini tampilannya saat kita mengarahkan kursor ke atasnya, kita memiliki efek kedipan dan juga efek cahaya neon dan jika Anda ingin mempelajari cara mendesain tombol Neon Animasi ini dari awal.

Ikuti langkah-langkah ini untuk menambahkan Tombol Neon Animasi di posting blogger

Menambahkan Kode Tombol Neon di Postingan Blogger

  1. Pergi ke Dasbor Blogger
  2. Pergi ke Bagian Posting untuk menambahkan Kode Tombol Neon di posting blogger
  3. Tambahkan Posting Baru dan salin kode yang disediakan di bawah ini.
  4. di sini Anda harus pergi ke tombol ini dan klik pada tampilan html sehingga Anda akan ketik kode html Anda di sini di tampilan penulisan untuk itu Anda harus pergi ke tampilan html dan setelah itu Anda bisa menempelkan kode tombol Neon html Anda di sini dan kemudian cukup klik terbitkan dan kemudian konfirmasi
  5. Dan Publikasikan postingan Anda

<button class="neon-button">Your Text is Here</button>

Menambahkan Kode Css Neon di Tema Blogger

  • Setelah ini, Pergi ke Tema BloggerEdit HTML  
  • Kemudian pilih Lanjutkan > Tambahkan > 
  • Salin kode berikut dan tempel dan klik Terapkan ke Blog
  • button.neon-button {  border: 3px solid #ffa9b7;  background: #fff;  padding: 16px 32px;  border-radius: 10px;  font-family: "Roboto", sans-serif;  font-size: 32px;  text-transform: uppercase;  color: #ffa9b7;  letter-spacing: 8px;  font-weight: bold;  margin: 24px;  cursor: pointer;}button.neon-button:hover {  animation: flicker 400ms linear forwards;}@keyframes flicker {  5% {    border-color: #fa032c;    color: #fa032c;    text-shadow: 0 0 4px #ff4262;    box-shadow: 0 0 16px 0 #ff4262, inset 0 0 8px 0 #ff4262;  }  10% {    border-color: #ff4262;    color: #ff4262;    box-shadow: unset;    text-shadow: unset;  }  55% {    border-color: #fa032c;    color: #fa032c;    text-shadow: 0 0 4px #ff4262;    box-shadow: 0 0 16px 0 #ff4262, inset 0 0 8px 0 #ff4262;  }  75% {    border-color: #fa032c;    color: #fa032c;    text-shadow: 0 0 4px #ff4262;    box-shadow: 0 0 16px 0 #ff4262, inset 0 0 8px 0 #ff4262;  }  80% {    border-color: #ff4262;    color: #ff4262;    box-shadow: unset;    text-shadow: unset;  }  100% {    border-color: #fa032c;    color: #fa032c;    text-shadow: 0 0 4px #ff4262;    box-shadow: 0 0 16px 0 #ff4262, inset 0 0 8px 0 #ff4262;  }}

    Kesimpulan

    Baiklah sekarang mari kita pergi ke pos kita dan menyegarkan halaman kita dan kita dapat melihat bahwa tombol lampu neon kita sedang ditampilkan di sini mari kita arahkan ke atasnya dan lihat apakah kita memiliki animasi berkedip dan kita dapat melihat bahwa semuanya berfungsi dengan baik jadi ini adalah bagaimana Anda menambahkan tombol lampu neon ke situs web blogger Anda..

    terima kasih telah berkunjung. Selamat Ngeblog..
    See Also :