从按钮开始的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;
}

资源