Cara Membuat Button Demo dengan Efek Rainbow Animated - TRIK SIMPLE
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.

Cara Membuat Button Demo dengan Efek Rainbow Animated

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
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.

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
Igniel
Kopi Inspirasi
DONASI Via Paypal
DONASI via Bank
Disqus Codes
  • To write a bold letter please use or
  • To write a italic letter please use or
  • To write a underline letter please use
  • To write a strikethrought letter please use
  • To write HTML code, please use or
    or

    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Jangan Lupa Subscribe Cuk