html - 按钮悬停效果：从左侧滑入，从左侧滑出

Question

我想在按钮上创建这种悬停效果：

悬停时，背景颜色会从左侧滑入。如果鼠标离开按钮，则应该返回原始背景颜色，但从左侧滑入。

现在我有这个代码（两个类都适用于按钮）：

.button_slide {
  color: #FFF;
  border: 2px solid rgb(216, 2, 134);
  border-radius: 0px;
  padding: 18px 36px;
  display: inline-block;
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: inset 0 0 0 0 #D80286;
  -webkit-transition: ease-out 0.4s;
  -moz-transition: ease-out 0.4s;
  transition: ease-out 0.4s;
}

.slide_right:hover {
  box-shadow: inset 400px 0 0 0 #D80286;
}

离开按钮时，我希望悬停背景从左侧消失。现在它从右侧灭亡。

有人可以帮我吗？

标签： htmlcss

Answer 1

你试过使用@keyframes吗？下面有一个例子。

我添加了 0.01px 的传播，否则动画会闪烁。我将尺寸更改为 em，因此可以毫无问题地更改尺寸。

下次请包含您的 HTML！

.button_slide {
    border: 2px solid rgb(216, 2, 134);
    padding: 1.28571em 2.57143em;
    display: inline-block;
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 20px;
    letter-spacing: 1px;
    cursor: pointer;
    color: #d80286;
  animation: leave 0.4s forwards;
}

.slide_right:hover {
    animation: hover 0.4s forwards;
}

@keyframes hover {
    from {
        box-shadow: inset 0 0 0 0.01px #d80286;
    }
    to {
        box-shadow: inset 8.79928em 0 0 0.01px #d80286;
        color: #fff;
    }
}

@keyframes leave {
    from {
        box-shadow: inset -8.79928em 0 0 0.01px #d80286;
        color: #fff;
    }
    to {
        box-shadow: inset 0 0 0 0.01px #d80286;
    }
}

<button class="button_slide slide_right">
    Hello
</button>