html - 悬停在按钮上时如何反转按钮渐变

Question

将鼠标悬停在按钮上时如何反转渐变？请参阅此处的“阅读更多”按钮以查看此效果：https ://carney.co/daily-carnage/ 。请注意，当您将鼠标悬停在按钮上时，黄色向左移动，粉红色向右移动。

我尝试关闭按钮容器上的转换以查看它是否是这样做的，但即使禁用它，悬停效果仍然存在。

将鼠标悬停在按钮上时，我希望黄色现在位于左侧，粉红色位于右侧（如此颠倒）

标签： htmlcss

Answer 1

反转渐变hover

HTML

   <div id="dd">This is div</div>

CSS

#dd {
  background: linear-gradient(to bottom right, yellow, #ff0066);
  }

#dd:hover {
  background: linear-gradient(to top left, yellow, #ff0066); 

  /* or */
  /* background: linear-gradient(to bottom right, #ff0066, yellow); */
  }