如何在CSS中悬停时使用渐变幻灯片进出按钮动画

Question

我正在努力完成两件事。

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/

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

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

Answer 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;
}

<a href="#" class="btn-grad">Button</a>