CSS3更改按钮背景颜色从左到右

Question

我只是对CSS3过渡有一点乐趣，并且正在考虑当你将鼠标悬停在一起时，如何动画一个按钮用不同的颜色填充？例如，

我们有一个白色的按钮，当有人盘旋在按钮上时，按钮将从左侧向右侧填充蓝色，当它们停止在按钮上方悬停时按钮将从白色填充为白色在左侧右侧，有没有人对如何做到这一点有任何想法？我能看到的唯一网站是Pokémon网站。

Answer 1

这是实现简单效果所需的所有css

.wrapper .navigation button
{
    width: 150;
    height: 85;
    background: linear-gradient(red 50%, blue 50%);
    transition: background 1s ease-out;
    background-size:1px 170px; 
}

.wrapper .navigation button:hover
{
    background-position:0px 85px; 
}