css - 如何在 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)。

请帮忙。

我的 fiddle :

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>