I have an <a> button,
a {
position: relative;
display: inline-block;
color: #111;
padding: 10px 20px;
border-radius: 10px;
background: #fff;
margin-top: 10px;
}
and there is a cool gradient as a background on a website https://sealzi.com/ (it's made with <canvas> element)
How can I make a gradient (like on the website) as a background of my button on hover?
You can try with linear-gradient with some angle:
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>You just need to add a:hover and write background you like.
For example;
a:hover{
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Also you can change color of button text of your own choice.For more details please do check w3schools.Hope this will be helpful.