Cara Membuat Tombol Beli Berkedip (Pulsing) di Blogger untuk Tingkatkan Penjualan

3/31/2026
Cara Membuat Tombol Beli Berkedip atau Pulsing di Blogger

Tombol Call to Action (CTA) merupakan salah satu elemen penting pada halaman blog yang digunakan untuk mengarahkan pengunjung melakukan tindakan tertentu, seperti membeli produk, menghubungi penjual, membuka halaman katalog, atau melakukan pemesanan melalui WhatsApp.

Agar tombol CTA lebih mudah terlihat, Anda dapat menambahkan efek berkedip atau pulsing menggunakan CSS. Animasi ini memberikan gerakan halus pada tombol sehingga tampil lebih menonjol dibandingkan tombol statis.

Kabar baiknya, efek tersebut dapat dibuat menggunakan HTML dan CSS tanpa JavaScript. Kode yang digunakan cukup sederhana sehingga dapat diterapkan pada postingan Blogger maupun widget HTML/JavaScript.

Apa Itu Tombol Beli Pulsing?

Tombol beli pulsing adalah tombol CTA yang memiliki animasi berulang berupa perubahan ukuran dan efek bayangan. Animasi tersebut memberikan kesan tombol sedang berdenyut secara perlahan.

Contohnya dapat digunakan untuk tombol seperti Beli Sekarang, Pesan Sekarang, Hubungi Kami, Order via WhatsApp, atau tombol menuju halaman produk.

Keuntungan Menggunakan Tombol CTA dengan Efek Pulse

Penggunaan animasi pada tombol dapat menjadi salah satu cara untuk membuat CTA lebih menonjol. Namun, animasi sebaiknya tetap digunakan secara proporsional agar tidak mengganggu kenyamanan pengunjung.

  • Lebih mudah terlihat dibandingkan tombol yang sepenuhnya statis.
  • Tidak membutuhkan JavaScript untuk menjalankan animasinya.
  • Mudah diterapkan di Blogger melalui postingan atau widget.
  • Warna dan ukuran dapat dikustomisasi sesuai desain blog.
  • Responsive dan dapat digunakan pada perangkat desktop maupun mobile.
  • Ringan dari sisi implementasi karena animasi menggunakan CSS.

Kode HTML Tombol Beli di Blogger

Langkah pertama adalah membuat struktur HTML untuk tombol. Kode berikut dapat digunakan di dalam postingan Blogger melalui mode HTML atau ditempatkan pada widget HTML/JavaScript. 

<a href="URL_TUJUAN_ANDA" class="btn-order-pulse">
  BELI SEKARANG
</a>

Ganti URL_TUJUAN_ANDA dengan URL tujuan tombol. URL tersebut dapat diarahkan ke halaman produk, halaman checkout, WhatsApp, marketplace, landing page, atau halaman lain sesuai kebutuhan.

Anda juga dapat mengganti teks BELI SEKARANG dengan teks CTA lain yang lebih sesuai dengan fungsi tombol.

Kode CSS untuk Membuat Tombol Berkedip

Setelah struktur HTML dibuat, tambahkan CSS berikut untuk memberikan efek pulse animation pada tombol. 

.btn-order-pulse {
  display: inline-block;
  padding: 15px 30px;
  background-color: #ff4757;
  color: #ffffff;
  font-weight: bold;
  text-decoration: none;
  border-radius: 50px;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.7);
  animation: pulse-animation 1.5s infinite;
}

@keyframes pulse-animation {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 20px rgba(255, 71, 87, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 71, 87, 0);
  }
}

.btn-order-pulse:hover {
  background-color: #e84118;
  animation: none;
  transform: scale(1.05);
}

Penjelasan Kode CSS Tombol Pulse

Agar lebih mudah melakukan modifikasi, berikut penjelasan bagian-bagian penting dari CSS yang digunakan.

1. Tampilan Dasar Tombol

.btn-order-pulse {
  display: inline-block;
  padding: 15px 30px;
  background-color: #ff4757;
  color: #ffffff;
  border-radius: 50px;
}

Bagian tersebut mengatur tampilan dasar tombol, mulai dari ukuran area klik, warna latar belakang, warna teks, hingga bentuk sudut tombol.

2. Animasi Pulse

animation: pulse-animation 1.5s infinite;

Properti tersebut menjalankan animasi bernama pulse-animation selama 1,5 detik dan mengulanginya secara terus-menerus.

3. Keyframes Animasi

Bagian @keyframes menentukan bagaimana tombol berubah dari awal hingga akhir animasi. Efek pulse dibuat melalui kombinasi perubahan ukuran menggunakan transform: scale() dan perubahan ukuran bayangan melalui box-shadow.

4. Efek Hover

.btn-order-pulse:hover {
  animation: none;
  transform: scale(1.05);
}

Ketika kursor diarahkan ke tombol pada perangkat desktop, animasi dihentikan sementara dan tombol diperbesar sedikit. Hal ini memberikan feedback visual ketika pengunjung berinteraksi dengan CTA.

Cara Memasang CSS di Blogger

Ada beberapa cara untuk memasang CSS pada Blogger. Salah satu cara yang praktis adalah menggunakan fitur Tambahkan CSS pada pengaturan tema, jika tersedia pada template yang digunakan.

Langkah 1: Buka Tema Blogger

Masuk ke dashboard Blogger kemudian pilih blog yang ingin Anda edit. Setelah itu buka menu Tema.

Langkah 2: Buka Pengaturan CSS

Pada bagian penyesuaian tema, cari menu Lanjutan atau opsi yang menyediakan Tambahkan CSS. Nama dan posisi menu dapat berbeda tergantung versi Blogger dan template yang digunakan.

Tempelkan kode CSS .btn-order-pulse dan @keyframes pulse-animation ke area CSS tersebut, kemudian simpan perubahan.

Langkah 3: Masukkan HTML Tombol

Setelah CSS tersimpan, buka artikel tempat tombol ingin ditampilkan. Ubah editor Blogger ke mode HTML, kemudian letakkan kode tombol pada lokasi yang diinginkan. 

<a href="URL_TUJUAN_ANDA" class="btn-order-pulse">
  BELI SEKARANG
</a>

Simpan atau publikasikan artikel, kemudian buka halaman tersebut untuk melihat hasilnya.

Cara Memasang Tombol di Widget Blogger

Selain pada artikel, tombol pulsing juga dapat digunakan pada widget. Misalnya Anda ingin menampilkan tombol menuju halaman pemesanan pada sidebar.

Buka menu Tata Letak, pilih Tambahkan Gadget, kemudian pilih HTML/JavaScript. Tempelkan kode HTML tombol pada bagian konten.

Pastikan CSS sudah tersedia pada template sebelum menggunakan class btn-order-pulse.

Cara Mengubah Warna Tombol

Warna tombol dapat diubah melalui properti background-color. Misalnya, untuk menggunakan warna hijau: 

.btn-order-pulse {
  background-color: #25d366;
}

Jika ingin menggunakan warna biru: 

.btn-order-pulse {
  background-color: #3498db;
}

Anda dapat menggunakan warna yang sesuai dengan identitas visual blog dan memastikan teks tetap memiliki kontras yang baik.

Cara Mengubah Kecepatan Animasi

Kecepatan efek pulse dapat diatur melalui nilai 1.5s pada properti animation. 

animation: pulse-animation 1.5s infinite;

Untuk membuat animasi lebih lambat, Anda dapat menggunakan nilai yang lebih besar: 

animation: pulse-animation 2.5s infinite;

Sebaliknya, nilai yang lebih kecil akan membuat animasi berjalan lebih cepat. Untuk tombol CTA, gunakan kecepatan yang nyaman agar animasi tidak terlihat terlalu agresif.

Cara Mengubah Ukuran Tombol

Ukuran tombol dapat diatur melalui nilai padding. 

padding: 15px 30px;

Contohnya, jika Anda ingin membuat tombol lebih besar: 

padding: 18px 40px;

Sesuaikan ukuran tombol dengan area tempat tombol ditampilkan, terutama jika tombol digunakan pada smartphone.

Tips Membuat Tombol Beli yang Efektif

Efek animasi bukan satu-satunya faktor yang menentukan efektivitas sebuah tombol CTA. Teks, posisi, warna, tujuan link, dan konteks di sekitar tombol juga perlu diperhatikan.

  • Gunakan teks CTA yang jelas dan singkat.
  • Pastikan URL tombol mengarah ke halaman yang sesuai.
  • Gunakan warna yang memiliki kontras dengan background.
  • Jangan menggunakan animasi yang terlalu cepat.
  • Berikan ruang yang cukup di sekitar tombol.
  • Pastikan tombol mudah disentuh pada smartphone.
  • Tempatkan tombol setelah informasi yang membantu pengunjung mengambil keputusan.

Apakah Tombol Berkedip Bisa Meningkatkan Penjualan?

Efek pulsing dapat membuat tombol lebih menonjol secara visual, tetapi tidak berarti tombol tersebut secara otomatis meningkatkan penjualan. Tingkat konversi dipengaruhi oleh berbagai faktor seperti kualitas produk, harga, kepercayaan pelanggan, penawaran, desain halaman, sumber traffic, dan relevansi CTA.

Oleh karena itu, gunakan animasi sebagai elemen pendukung. Pastikan pengunjung tetap mendapatkan informasi yang cukup sebelum diarahkan untuk melakukan pembelian atau pemesanan.

Perhatikan Aksesibilitas dan Kenyamanan Pengunjung

Animasi yang terus berjalan dapat mengganggu sebagian pengguna. Karena itu, Anda dapat menambahkan dukungan untuk pengunjung yang memilih mengurangi gerakan animasi pada perangkat mereka.

Tambahkan CSS berikut setelah kode utama jika ingin menghormati pengaturan prefers-reduced-motion: 

@media (prefers-reduced-motion: reduce) {
  .btn-order-pulse {
    animation: none;
    transition: none;
  }
}

Dengan pengaturan tersebut, animasi pulse akan dinonaktifkan ketika perangkat pengguna meminta pengurangan gerakan. Tombol tetap dapat digunakan seperti biasa.

Kesimpulan

Membuat tombol beli berkedip atau pulsing di Blogger dapat dilakukan dengan mudah menggunakan HTML dan CSS. Efek animasi dibuat menggunakan @keyframes sehingga tidak membutuhkan JavaScript untuk menjalankan efek denyut pada tombol.

Tombol ini dapat digunakan untuk berbagai kebutuhan, seperti tombol beli produk, order WhatsApp, halaman checkout, katalog, jasa, landing page, maupun tombol promosi.

Agar hasilnya tetap profesional, gunakan animasi secara proporsional, pilih warna yang sesuai dengan desain blog, gunakan teks CTA yang jelas, dan pastikan tombol tetap nyaman digunakan pada perangkat mobile.

FAQ Tombol Beli Pulsing di Blogger

1. Apa itu tombol beli pulsing?

Tombol beli pulsing adalah tombol CTA yang menggunakan animasi CSS berupa perubahan ukuran dan efek bayangan secara berulang sehingga tombol terlihat seperti berdenyut.

2. Apakah tombol pulsing di Blogger membutuhkan JavaScript?

Tidak. Animasi pada contoh ini menggunakan CSS melalui @keyframes, sehingga tidak membutuhkan JavaScript untuk menjalankan efek pulse.

3. Apakah tombol ini bisa digunakan untuk link WhatsApp?

Bisa. Anda dapat mengganti URL tujuan dengan link WhatsApp atau halaman lain yang digunakan untuk menerima pesanan.

4. Apakah warna tombol bisa diubah?

Bisa. Warna dapat diubah melalui properti background-color pada class .btn-order-pulse.

5. Bagaimana cara mengatur kecepatan animasi?

Kecepatan animasi dapat diatur melalui durasi pada properti animation. Semakin besar nilai waktunya, semakin lambat animasi berjalan.

6. Apakah tombol pulsing otomatis meningkatkan penjualan?

Tidak ada jaminan. Efek pulse hanya membantu memberikan penekanan visual pada tombol. Hasil penjualan atau konversi juga dipengaruhi oleh produk, harga, penawaran, kualitas halaman, dan berbagai faktor lainnya.

7. Apakah animasi tombol bisa dimatikan?

Bisa. Animasi dapat dinonaktifkan dengan menghapus atau mengubah properti animation. Anda juga dapat menggunakan prefers-reduced-motion untuk menghormati preferensi pengguna yang memilih mengurangi animasi.

Baca Artikel Lainnya

Kembali ke Beranda
Link profil berhasil disalin!