代码之家 › 专栏 › 技术社区 › David

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

linear-gradients css-transitions button css

David · 技术社区 · 7 年前

我想完成两件事。

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/

2 回复 | 直到 7 年前

VXp Kadir BuÅ¡atliÄ 7 年前

您可以这样简化代码:

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

Saravana 7 年前

试试这个。

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