Cara Menciptakan Button Demo Dengan Efek Rainbow Animated
Cara Membuat Button Demo dengan Efek Rainbow Animated - Button rainbow dengan efek animasi warna berjalan ketika mau di klik menawarkan efek waw kepada pengunjung setia blog sobat, dengan menambahkan button ini aku 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 anggun di hp sekalipun , baiklah pribadi saja ke caranya sob...
Cara Membuat Button Demo dengan Efek Rainbow Animated
Pertama sahabat masuk terlebih dahulu ke Blogger > Tema > Edit Html > copy code CSS dibawah ini dan pastekan sempurna diatas arahan ]]></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 arahan HTML dibawah ini dipostingan sahabat yang telah dibuat.
<a href="#" class="rainbow-button" alt="Cara Membuat Button Demo dengan Efek Rainbow Animated Cara Membuat Button Demo dengan Efek Rainbow Animated"></a>Jika sudah klik postingkan dan lihatlah akhirnya :)
Baca Juga : Cara Memasang Banner Iklan Melayang Dengan Tombol Close Responsive
Oke sekian yang dapat aku jelaskan tentang Cara Membuat Button Demo dengan Efek Rainbow Animated Terima Kasih yang sudah berkunjung supaya bermanfaat bagi kalian semua.
Sumber https://www.triksimple.com/