Animated button with rainbow hover

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

By Thiago Marques


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!

☑ Puede que también te interese:

CSS Border Transitions
Sign-post arrow buttons with CSS