.btn { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; transition-duration: 0.4s; cursor: pointer; } .btn:hover { background-color: white; color: #4CAF50; }
按钮是网页设计中最为基本的元素之一,而悬停效果则是让按钮更具有交互性和视觉吸引力的常用技巧。CSS3 的强大特性为大家提供了更多实现悬停效果的可能性。以上代码使用 CSS3 实现了一个简单的悬停按钮效果,当鼠标悬停在按钮上时,按钮的颜色和文本颜色会发生变化,给用户以视觉反馈,增加用户体验。