如何在悬停时将画布渐变作为按钮背景答案

【问题标题】：How to make canvas gradient as a button background on hover如何在悬停时将画布渐变作为按钮背景
【发布时间】：2021-10-28 16:07:19
【问题描述】：

我有一个<a> 按钮，

a {
position: relative;
display: inline-block;
color: #111;
padding: 10px 20px;
border-radius: 10px;
background: #fff;
margin-top: 10px;
}

在网站https://sealzi.com/ 上有一个很酷的渐变作为背景（它是用<canvas> 元素制作的）

如何将渐变（如网站上的）作为悬停按钮的背景？

【问题讨论】：

标签： javascript html css canvas hover

【解决方案1】：

您只需要添加a:hover 并写上您喜欢的background。例如；

a:hover{
    background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
    }

您也可以更改您自己选择的按钮文本的color。有关更多详细信息，请查看w3schools。希望这会有所帮助。

【讨论】：

【解决方案2】：

你可以试试linear-gradient，换个角度：

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%);
}

&lt;a href="#"&gt;Link&lt;/a&gt;

【讨论】：