Cara Membuat Tombol Mengkilap dan Animasi Keren di Blogspot

Tombol (button) yang memiliki efek animasi seperti mengkilap, neon, aurora, hingga pelangi bisa membuat tampilan blog kamu terlihat lebih hidup dan profesional. Pada artikel ini, kita akan membahas 5 jenis efek tombol animasi keren lengkap dengan script CSS-nya yang siap kamu salin dan pasang di Blogspot.

1. Tombol Shine (Efek Kilau Bergerak)

Tombol ini memiliki efek kilauan lembut yang bergerak dari kiri ke kanan, menciptakan tampilan mewah dan elegan.

<button id="btn-shine">Shine</button>

2. Tombol Neon (Efek Cahaya Menyala)

Tombol neon memancarkan cahaya berwarna hijau terang dan berubah-ubah, seperti papan reklame neon yang menarik perhatian.

<button id="btn-neon">Neon</button>

3. Tombol Aurora (Efek Gradasi Bergerak)

Tombol ini menggunakan gradasi warna oranye dan merah yang bergerak halus seperti aurora di langit malam.

<button id="btn-aurora">Aurora</button>

4. Tombol Flash (Efek Berkedip Cepat)

Tombol flash memberikan efek berkedip dengan warna biru dan kuning yang bergantian cepat, cocok untuk tombol aksi penting seperti “Submit” atau “Claim”.

<button id="btn-flash">Flash</button>

5. Tombol Rainbow (Efek Pelangi Bergerak)

Efek ini menggunakan gradasi tujuh warna pelangi yang bergerak terus menerus. Tombol ini terlihat ceria dan penuh warna.

<button id="btn-rainbow">Rainbow</button>

6. Tombol Getlink (Tautan Mengkilap)

Tombol ini memiliki fungsi seperti tautan (link), namun tampil dengan efek kilap bergerak dan bayangan lembut. Cocok untuk tombol download atau menuju halaman lain.

<button id="visit-url">Getlink</button>

Tutorial Cara Memasang di Blogspot

simak penjelasan di bawah.

Demo Hasil Tombol:

Dengan efek-efek tombol ini, tampilan situs kamu akan terlihat lebih modern dan menarik perhatian pengunjung.

Berikut panduan lengkap untuk membuat berbagai jenis tombol animasi keren seperti Shine, Neon, Aurora, Flash, Rainbow, dan Getlink. Setiap jenis dilengkapi dengan kode CSS dan HTML siap salin.

1. Membuat Tombol Shine

Tombol Shine memiliki efek kilap bergerak dari kiri ke kanan seperti cahaya menyapu tombol.

Kode CSS:

#btn-shine {
  background: linear-gradient(90deg, #1e8449, #27ae60, #1e8449);
  background-size: 200% 100%;
  color: #fff;
  animation: shine 2s linear infinite;
  position: relative;
  overflow: hidden;
}
#btn-shine::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: rgba(255,255,255,0.4);
  transform: skewX(-25deg);
  animation: shimmer 2s infinite;
}

Kode HTML:

<button id="btn-shine">Shine</button>

2. Membuat Tombol Neon

Tombol ini berwarna terang dengan efek cahaya berdenyut seperti lampu neon menyala.

Kode CSS:

#btn-neon {
  background: #00ff99;
  color: #000;
  text-transform: uppercase;
  box-shadow: 0 0 10px #00ff99, 0 0 40px #00ff99, 0 0 80px #00ff99;
  animation: neon-pulse 1.5s infinite alternate;
}

Kode HTML:

<button id="btn-neon">Neon</button>

3. Membuat Tombol Aurora

Tombol Aurora menampilkan efek gradasi warna hangat seperti cahaya aurora yang lembut dan menenangkan.

Kode CSS:

#btn-aurora {
  background: linear-gradient(270deg, #ff6600, #ff0000, #ff6600);
  background-size: 400% 400%;
  color: #fff;
  animation: aurora 3s ease infinite;
}

Kode HTML:

<button id="btn-aurora">Aurora</button>

4. Membuat Tombol Flash

Tombol ini berkedip cepat dan memancarkan efek cahaya terang, cocok untuk tombol aksi utama.

Kode CSS:

#btn-flash {
  background: linear-gradient(90deg, #00c3ff, #ffff1c);
  color: #000;
  animation: flash 0.8s infinite;
}

Kode HTML:

<button id="btn-flash">Flash</button>

5. Membuat Tombol Rainbow

Tombol Rainbow menampilkan gradasi tujuh warna pelangi yang terus bergerak dan tampak ceria.

Kode CSS:

#btn-rainbow {
  background: linear-gradient(270deg, red, orange, yellow, green, blue, indigo, violet);
  background-size: 400% 400%;
  color: #fff;
  text-shadow: 0 0 10px #000;
  animation: rainbow 3s linear infinite;
}

Kode HTML:

<button id="btn-rainbow">Rainbow</button>

6. Membuat Tombol Getlink Mengkilap

Tombol Getlink terlihat seperti link namun dengan efek kilap berjalan, sangat cocok untuk tombol unduhan atau tautan promosi.

Kode CSS:

#visit-url {
  background: linear-gradient(90deg, #1e8449, #27ae60, #1e8449);
  background-size: 200% 100%;
  color: #fff;
  animation: shine 2s linear infinite;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(39,174,96,0.6);
}
#visit-url::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: rgba(255,255,255,0.4);
  transform: skewX(-25deg);
  animation: shimmer 2s infinite;
}

Kode HTML:

<button id="visit-url">Getlink</button>

Cara Pasang di Blogspot

Buka Dashboard Blogger → Tema → Edit HTML.
Salin seluruh kode CSS di atas ke dalam tag <style> sebelum </head>.
Gunakan HTML tombol sesuai jenisnya di postingan atau halaman statis.
Simpan dan lihat hasilnya langsung di blog kamu.

Tips: Semua tombol sudah responsif, jadi otomatis menyesuaikan ukuran layar di HP maupun PC.