jquery - 按钮上的 CSS 过渡

Question

我正在开发一个按钮，它可以在悬停时更改背景颜色和颜色 CSS 属性。基本的东西。

<span>Contact me</span>

.contact-right span{
    background-color: #fff;
    color: #f87f73;
    padding: 0px 25px;
    border: 5px solid #f87f73;
}

.contact-right span:hover{
    background-color: #f87f73;
    color: #fff;
    -webkit-transition: all .35s ease;
    -o-transition: all .35s ease;
    transition: all .35s ease;
}

这不是很好，我看到过渡效果很流畅，背景颜色和颜色也很流畅。但我想要一个特殊的东西，通过它从按钮的左到右进行过渡。我的意思是过渡不应该一次性作用于整个按钮，它应该从左边滑入，从​​左到右改变背景颜色和文本颜色。

我该如何实现？可以通过 CSS 实现吗，还是我必须以某种方式使用 Jquery？

Answer 1

我希望这是你想要的..

DEMO

.contact-right span{
    background-color: #fff;
    color: #f87f73;
    padding: 0px 25px;
    border: 5px solid #f87f73;
    display: block;
    background-image: linear-gradient(to left,
                                      transparent,
                                      transparent 50%,
                                      #00c6ff 50%,
                                      #00c6ff);
    background-position: 100% 0;
    background-size: 200% 100%;
    transition: all .25s ease-in;

}

.contact-right span:hover{
background-position: 0 0;
    background-color: #f87f73;
    color: #fff;
    -webkit-transition: all .35s ease;
    -o-transition: all .35s ease;
    transition: all .35s ease;
}

Source