如何在CSS中悬停时使用渐变滑入和滑出按钮动画答案

【问题标题】：How to get button animation with gradient slide in and out on hover in CSS如何在CSS中悬停时使用渐变滑入和滑出按钮动画
【发布时间】：2018-03-02 08:08:06
【问题描述】：

我正在尝试完成两件事。

1) 悬停时从左到右的渐变

2) 没有悬停时从右到左渐变

3) 我也试图在 firefox 上摆脱某种右灰色边框

这是我的代码：

HTML：

                <a class="btn-main" href="#">Przejdź do sklepu </a>

CSS：

.btn-main {
    color: #000000;
    border-left: solid 1px #000000;
    padding: 8px 12px;
    font-weight: 700;
    text-decoration: none;
}
.btn-main {
    background-size: 200% 100%; 
    background-image: linear-gradient(to right, black 50%, white 50%),
                      linear-gradient(to right, white 50%, black 50%);
                      background-image: -moz-linear-gradient(to right, white 50%, black 50%),
                      linear-gradient(to right, black 50%, white 50%);
                      background-image: -webkit-linear-gradient(to right, black 50%, white 50%),
                      linear-gradient(to right, white 50%, black 50%);               
    transition: background-position left 0.5s linear; 
    -webkit-transition: background-position left 0.5s linear; 
    -moz-transition: background-position left 0.5s linear; 
    -o-transition: background-position left 0.5s linear; 
    -webkit-background-clip: text, border-box;
    -moz-background-clip: text, border-box;
    background-clip: text, border-box; 
    color: transparent;
    -webkit-text-fill-color: black;
}
.btn-main:hover {
    background-position: -100% 0;
    color: #ececec;
    text-decoration: none;
    transition: all 0.5s cubic-bezier(0.000, 0.000, 0.230, 1);
    -webkit-text-fill-color: #ececec;   
}

现在当我让它悬停时它工作正常 (1)，但是当没有悬停时我找不到渐变的解决方案 (2) 以及如何在 Firefox (3) 上摆脱这个灰色边框。

请帮忙。

我的小提琴：

https://jsfiddle.net/6fx64L8j/3/

【问题讨论】：

标签： css button css-transitions linear-gradients

【解决方案1】：

你可以像这样简化你的代码：

.btn-main {
  color: #000;
  border-left: solid 1px #000;
  padding: 8px 12px;
  font-weight: 700;
  text-decoration: none;
  background-size: 0% 100%;
  background-image: linear-gradient(black, black);
  background-repeat: no-repeat;
  transition: all 0.5s linear;
  color: #000;
}

.btn-main:hover {
  background-size: 100% 100%;
  color: #ececec;
  transition: all 0.5s cubic-bezier(0.000, 0.000, 0.230, 1);
}

&lt;a class="btn-main" href="#"&gt;Przejdź do sklepu &lt;/a&gt;

【讨论】：

【解决方案2】：

试试这个。

.btn-grad {
    background: transparent;
    width: 200px;
    margin: 0 auto;
    text-align: center;
    padding: 50px;
    text-transformation: uppercase;
    font-family: 'arial', sans-serif;
    font-weight: bold;
    margin-top: 45px;
    color: #000;
    padding: 20px;
    display: block;
    background-image: linear-gradient(to left, transparent, transparent 50%, #ff0000 50%, #00c6ff);
    background-position: 100% 0;
    background-size: 200% 100%;
    transition: all .25s ease-in;
    text-decoration:none;
}

.btn-grad:hover {
    background-position: 0 0;
    color: #333;
}

&lt;a href="#" class="btn-grad"&gt;Button&lt;/a&gt;

【讨论】：

但是我希望这个按钮首先没有背景颜色，然后从左到右悬停这个渐变，然后当悬停时从右到左停止渐变