Animated button with rainbow hover

Animated button with rainbow hover

Botón efecto al pasar el cursor con fondo rainbow con animación CSS

By Thiago Marques


Subscribe for more Code

Recibe las Actualizaciones de HTML y CSS



HTML

<div class="container text-center"><div class="container text-center"> <a class="rainbow rainbow-1">Boton Rainbow</a> <a class="rainbow rainbow-2">Boton Rainbow</a> <a class="rainbow rainbow-3">Boton Rainbow</a> <a class="rainbow rainbow-4">Boton Rainbow</a> <a class="rainbow rainbow-5">Boton Rainbow</a> </div>


CSS

.a{color:#E7484F}
.b{color:#F68B1D}
.c{color:#FCED00}
.d{color:#009E4F}
.e{color:#00AAC3}
.f{color:#732982}
.container{margin-top:150px}
.text-center{text-align:center}
.rainbow{background-color:#343A40;border-radius:4px;color:#fff;cursor:pointer;padding:8px 16px}
.rainbow-1:hover{background-image:linear-gradient(90deg,#00C0FF 0,#FFCF00 49%,#FC4F4F 80%,#00C0FF 100%);animation:slidebg 5s linear infinite}
.rainbow-2:hover{background-image:linear-gradient(to right,#fca4a5 1%,#fcd8a6 14%,#d5f9a4 31%,#a6fcca 50%,#a4cef9 72%,#dda4f9 89%,#ff999a 100%);animation:slidebg 2s linear infinite}
.rainbow-3:hover{background-image:linear-gradient(to right,#e4ff6d 9%,#6afc8c 19%,#68f9e4 30%,#6bb2ff 40%,#6d6bff 48%,#a8009d 58%,#f200ff 73%,#ff3da4 85%,#fcd705 100%);animation:slidebg 2s linear infinite}
.rainbow-4:hover{background-image:linear-gradient(to right,#E7484F,#F68B1D,#FCED00,#009E4F,#00AAC3,#732982);animation:slidebg 2s linear infinite}
.rainbow-5:hover{background-image:linear-gradient(to right,#E7484F,#E7484F 16.65%,#F68B1D 16.65%,#F68B1D 33.3%,#FCED00 33.3%,#FCED00 49.95%,#009E4F 49.95%,#009E4F 66.6%,#00AAC3 66.6%,#00AAC3 83.25%,#732982 83.25%,#732982 100%,#E7484F 100%);animation:slidebg 2s linear infinite}
@keyframes slidebg{to{background-position:20vw}}
.follow{margin-top:40px}
.follow a{color:#000;padding:8px 16px;text-decoration:none}
¿Te gusto el post?
¡Compártelo!

Gabriela Laya

Me gusta mucho el Diseño Web, Crear plantillas para Wordpress y Blogger y todo lo relacionado a estas 2 plataformas de Blogs. En mi tiempo libre me encanta Leer, aprender a usar nuevos programas, escuchar música y más :D

Recibe las últimas actualizaciones