CSS Pulsing Button

---

Tutorial Blog: Cara Membuat CSS Pulsing Button

Masuk Blogger: Tema > Edit HTML

Tambahkan kode CSS berikut ini sebelum kode ]]></b:skin> atau </style>

.bg,
.oibutton {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 100%;
}

.cont {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg {
  animation: pulse 1.2s ease infinite;
  background: #ff3466;
}

.oibutton {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 99;
  border: none;
  background: #ff3466;
  background-size: 18px;
  cursor: pointer;
  outline: none;
}

.oibutton a {
  position: absolute;
  color: #FFF;
  font-size: 17px;
}

@keyframes pulse {
  0% {
    transform: scale(1, 1);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

Simpan Tema

Untuk menampilkan hasilnya, tambahkan kode HTML berikut ini pada postingan bagian Compose HTML

<div class="cont">
<div class="bg">
</div>
<div class="oibutton">
<a href="#url" target="_blank"><i class="fa fa-chevron-down" aria-hidden="true"></i></a></button>
</div>
</div>

CSS .cont

justify-content center posisi tombol tengah

justify-content flex-end posisi tombol kanan

justify-content none posisi tombol default (kiri)