CSS按钮悬停效果不明显？试试hover优化

.button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}
<p>.button:hover {
background-color: #0056b3; /<em> 更深的蓝色 </em>/
color: #fff;
}</p>

.button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  <strong>transition: all 0.3s ease;</strong> /* 所有属性在0.3秒内平滑变化 */
}
<p>.button:hover {
background-color: #004085;
color: #ffeaa7;
}</p>

.button {
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
<p>.button:hover {
background-color: #004085;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
transform: scale(1.05);
}</p>