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

Answer 2

您应该尝试播放：之前和之后的伪元素，如this codrops article所示：

.contact-right {
    position: relative;
    background-color: #fff;
    color: #f87f73;
    padding: 5px 25px;
    border: 5px solid #f87f73;
    -webkit-transition: all .35s ease;
    -o-transition: all .35s ease;
    transition: all .35s ease;
    cursor: pointer;
}

.contact-right:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #f87f73;
    -webkit-transition: all .35s ease;
    -o-transition: all .35s ease;
    transition: all .35s ease;
}

.contact-right:hover {
    color: #fff;
}

.contact-right:hover:before {
    width: 100%;
    color: #fff;
}

JSFiddle

Answer 3

您可以使用伪元素来实现此效果

<强> FIDDLE

span{
    background-color: #fff;
    color: #f87f73;
    padding: 0px 25px;
    border: 5px solid #f87f73;
    position:relative;
}

span:hover:before {
    content: attr(data-text);
    background: #f87f73;
    color: #fff;
    width: 130px;
    visibility: visible; 
    opacity:1;
}
span:before {
    content: '';
    display:block;
    position: absolute;
    padding: 0px 25px;
    box-sizing: border-box;
    width: 1%;
    height: 100%;
     -webkit-transition: all .35s ease;
    -o-transition: all .35s ease;
    transition: all .35s ease;
    visibility: hidden;
    opacity:0;
}

<span data-text="Contact me">Contact me</span>

从按钮开始的CSS转换

3 个答案: