Cara Menciptakan Button Demo Dengan Pengaruh Rainbow Animated
Cara Membuat Button Demo dengan Efek Rainbow Animated - Button rainbow dengan efek animasi warna berjalan ketika mau di klik menunjukkan 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 elok di hp sekalipun , sepakat pribadi saja ke caranya sob...
Cara Membuat Button Demo dengan Efek Rainbow Animated
Pertama teman 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 teman 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 akibatnya :)
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/