悬停在按钮上时如何反转按钮渐变答案

【问题标题】：How to reverse button gradient when hovering over it悬停在按钮上时如何反转按钮渐变
【发布时间】：2019-05-14 02:28:54
【问题描述】：

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

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

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

【问题讨论】：

只需在 CSS 中为 :hover 重新定义渐变即可。

标签： html css

【解决方案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); */
  }

【讨论】：

【解决方案2】：

根据您提供的示例，您可以在 suedo 类之前和之后使用。您可以删除之前的过渡以消除潜在的白色“闪光”。

示例：https://codepen.io/SROwl/pen/MdjLvj

<button>Gradient Change</button>  



  button {
    position: relative;
    -webkit-appearance: none;
    background: transparent;
    font-size: 30px;
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
  }
  button::before {
    content: '';
    background-image: linear-gradient(purple, orange);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    transition: opacity 250ms ease;
  }
  button::after {
    content: '';
    opacity: 0;
    background-image: linear-gradient(orange, purple);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    transition: opacity 250ms ease;
  }
  button:hover::before, button:active::before, button:focus::before {
    opacity: 0;
  }
  button:hover::after, button:active::after, button:focus::after {
    opacity: 1;
  }

【讨论】：