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