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-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>

Answer 2

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

.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>

CSS 如何在鼠标悬停时获得带有渐变滑入和滑出的按钮动画

How to get button animation with gradient slide in and out on hover in CSS

css

button

linear-gradients

css-transitions