Tengo un botón <a> ,
a { position: relative; display: inline-block; color: #111; padding: 10px 20px; border-radius: 10px; background: #fff; margin-top: 10px; } y hay un gradiente genial como fondo en un sitio web https://sealzi.com/ (está hecho con el elemento <canvas> )
¿Cómo puedo hacer un degradado (como en el sitio web) como fondo de mi botón al pasar el mouse?
Puedes probar con linear-gradient con algún ángulo:
a { position: relative; display: inline-block; color: #111; padding: 10px 20px; border-radius: 10px; background: #fff; text-decoration: none; margin-top: 10px; } a:hover { color: whitesmoke; background: linear-gradient(123deg, rgba(253,0,243,1) 0%, rgba(173,0,255,1) 20%, rgba(20,173,227,1) 80%, rgba(79,206,213,1) 100%); } <a href="#">Link</a>Solo necesita agregar a:hover y escribir background que desee. Por ejemplo;
a:hover{ background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); } También puede cambiar color del texto del botón de su propia elección. Para obtener más detalles, consulte w3schools . Espero que esto sea útil.