Button Rainbow with Html Css

Button Rainbow | Botón rainbow |boton con borde arcoiris con HTML y CSS efecto hover.

By: Lemmin


HTML

<a href="#" class="rainbow-button" target="blank_" alt="Rainbow"></a>
CSS

a{text-decoration:none;color:#FFF}
.rainbow-button{width:calc(20vw + 6px);height:calc(8vw + 6px);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:3vw;font-weight:700}
.rainbow-button:after{content:attr(alt);width:20vw;height:8vw;background-color:#191919;display:flex;align-items:center;justify-content:center}
.rainbow-button:hover{animation:slidebg 2s linear infinite}
@keyframes slidebg{to{background-position:20vw}}

¿Te gusto el post?
¡Compártelo!

Adblock Detectado

Apoya este sitio desactivando el Adblock para seguir navegando. ¡Gracias!

¡Ya Desactive el Adblock!