代码看起来完全正常并且可以工作，但表现得好像所有
transition这是我目前拥有的按钮代码：
.button {
font-size: 19px;
text-decoration: none;
color: white;
background: black;
padding: 16px 38px;
border-radius: 8px;
border: 2px solid #0000;
transition: all 500ms;
}
.button:hover {
background: white;
color: black;
border-color: black;
transition: all 500ms;
}
，但它的颜色在悬停时没有动画。这只是一个瞬间的转变。为什么？
我尝试删除
all500ms0.5slinear这是您的代码片段。我添加了一些 HTML 标记以使其工作。
它在这里完美运行。
.button {
font-size: 19px;
text-decoration: none;
color: white;
background: black;
padding: 16px 38px;
border-radius: 8px;
border: 2px solid #0000;
transition: all 500ms;
}
.button:hover {
background: white;
color: black;
border-color: black;
transition: all 500ms;
}<div>
<button class="button"> Click me! </button>
</div>所以这里基本上过渡预计在悬停时改变颜色的时间工作。 我刚刚将它修改为 2000 毫秒只是为了让你意识到它的工作原理。
.button {
font-size: 19px;
text-decoration: none;
color: white;
background: black;
padding: 16px 38px;
border-radius: 8px;
border: 2px solid #0000;
transition: all 2000ms;
}
.button:hover {
background: white;
color: black;
border-color: black;
transition: all 500ms;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Why does transition not work for a button? -->
</head>
<body>
<button class="button">
test
</button>
</body>
</html>在您的情况下，另一种可能性是您希望它在标签上工作但将其定义为一个类（我不确定，也不认为您是愚蠢的）
但在第一次尝试时，我在尝试时做了同样的事情。
谢谢。 让我知道它是否有效
兄弟，我在codepen和vs code上试过了。它完全可以流畅和漂亮地工作。尝试刷新您的浏览器。不错的设计哦