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等其他工具呢？

- Rohan

---

你能提供一个 Fiddle 吗？ - Guruprasad J Rao

Answer 1

我希望这是你想要的方式。

演示

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

来源

- Guruprasad J Rao

---

这个也能工作，但我不明白这段代码是如何工作的。 - Rohan

Answer 2

你应该尝试使用伪元素:before和:after进行设计，就像这篇codrops文章中所展示的那样：

.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

- Flo Schild

---

好的！你的代码肯定是有效的。但我不明白它是如何工作的！请解释一下？ - Rohan

我结合使用HTML伪元素(:before)和CSS3过渡效果。在:hover时，我只需将:before伪元素的宽度设置为全宽，其初始宽度为0px，并具有0.35秒线性宽度过渡效果。 - Flo Schild

我最终明白了。谢谢！ :) - Rohan

只需比较:hover状态和正常状态之间的差异，唯一的区别是:before伪元素的颜色和宽度； 然后CSS3过渡呈现动画效果；如果您删除过渡，则效果将类似于切换透明/纯色。 - Flo Schild

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>

- Danield