Cara Membuat Button Demo dengan Efek Rainbow Animated

Cara Membuat Button Demo dengan Efek Rainbow Animated - Button rainbow dengan efek animasi warna berjalan saat mau di klik memberikan efek waw kepada pengunjung setia blog sobat, dengan menambahkan button ini saya yakin akan menambah friendly kepada pengunjung blog sobat.

Baca Juga : Cara Mengecek Struktur Data Pada Template Blog

Button Rainbow Animated ini tertunya responsive sob yang akan terlihat bagus di hp sekalipun , oke langsung saja ke caranya sob...

Cara Membuat Button Demo dengan Efek Rainbow Animated

Pertama sobat masuk terlebih dahulu ke Blogger > Tema > Edit Html > copy code CSS dibawah ini dan pastekan tepat diatas kode ]]></b:skin>

a {
  text-decoration:none;
  color:#FFF;
}
.rainbow-button {
  width:calc(10vw + 10px);
  height:calc(4vw + 10px);
  background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF 100%);
  border-radius:5px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-transform:uppercase;
  font-size:2vw;
  font-weight:bold;
}
.rainbow-button:after {
  content:attr(alt);
  width:10vw;
  height:4vw;
  background-color:#191919;
  display:flex;
  align-items:center;
  justify-content:center;
}
.rainbow-button:hover {
  animation:slidebg 2s linear infinite;
}
@keyframes slidebg {
  to {
    background-position:30vw;
  }
}

Klik simpan pada tema sobat, Kemudian terapkan kode HTML dibawah ini dipostingan sobat yang telah dibuat.

<a href="#" class="rainbow-button" alt="Demo"></a>

Jika sudah klik postingkan dan lihatlah hasilnya :)


Baca Juga : Cara Memasang Banner Iklan Melayang Dengan Tombol Close Responsive

Oke sekian yang bisa saya jelaskan tentang Cara Membuat Button Demo dengan Efek Rainbow Animated Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.