如何使用CSS实现鼠标悬停时的渐变颜色变化？

Question

我想让背景颜色从普通状态渐变到鼠标悬停状态，但是不幸的是，我读过和尝试过的一切都没起作用。以下是我的代码：

.button-submit {
     color: #ffffff;
     cursor: pointer;
     display: inline-block;
     line-height: 35px;
     background: #5ea12b;
     padding: 0px 20px;
     vertical-align: middle;
     font-size: 18px;
     min-width: 80px;
     min-height: 35px;
     font-family: Light;
     border: 1px solid transparent;
     margin: 5px;
}
.button-submit:hover {
     background: #5ea12b;
     color: #FFFFFF;
}

- nicksss

Answer 1

使用transition属性：

例如：

.button-submit {
    background: #5ea12b;
    transition: background 0.5s ease-in-out;
}

当鼠标悬停时，将背景颜色变为稍微深一点的色调。

.button-submit:hover {
     background: #000;
}

查看示例

- Dhiraj

---

谢谢。现在好了一些，但仍然几乎不可察觉 - 我正在尝试使它像这样 - http://revolution.themepunch.com/wordpress-image-hero/ - 特别是红色按钮。你有什么建议吗？ - nicksss

@nicksss，我已经更新了我的答案。请查看并确认是否正确，如果是的话，您可以将其标记为正确答案。 - Dhiraj

太好了，谢谢！ - nicksss