CSS 按钮背景颜色显示另一种颜色在过渡延迟

Question

我正在尝试在悬停时按钮背景颜色过渡。 我观察到当我悬停按钮时，它在延迟时间内显示不同的颜色。

下面是代码。

.button {
background-color: aqua;
transition: background-color 1s ease 0.5s;
width: 500px;
height: 500px;
font-size: 24pt;
}
.button:hover {
background-color: blue;
}
.button:active {
background-color: rgb(216, 36, 4);
}

<button type="button" class="button">button</button>

如果删除延迟时间，则在悬停或选择时也会观察到闪烁效果。

这是关于它如何表现的视频。 https://youtu.be/O0q-SK-eejk

好心地，帮我解决它，不要在延迟时间上显示不同的颜色。

Answer 1

看到灰色的原因是因为浏览器为背景属性添加了默认样式。请尝试以下代码。

.button {
background: inherit;
background-color: aqua;
transition: background-color 1s ease 0.5s;
width: 500px;
height: 500px;
font-size: 24pt;
}
.button:hover {
background: inherit;
background-color: blue;
}
.button:active {
background-color: rgb(216, 36, 4);
}

<button type="button" class="button">button</button>