如何用HTML和CSS创建初始红色、悬停变橙色的按钮

方法一：内联样式（仅作演示，不推荐） #

直接在按钮标签中嵌入样式和交互逻辑，适合快速测试但不利于代码维护：

<button style="background-color: red; color: white; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer;" 
        onmouseover="this.style.backgroundColor='orange'" 
        onmouseout="this.style.backgroundColor='red'">
  点击按钮
</button>

方法二：CSS分离写法（推荐） #

将结构与样式分离，是前端开发的规范写法，便于后续修改和复用：

HTML结构

<button class="custom-btn">点击按钮</button>

CSS样式

/* 按钮初始状态 */
.custom-btn {
  background-color: red;
  color: #fff; /* 设置白色文字，提升红色背景下的可读性 */
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease; /* 可选：添加平滑过渡动画 */
}

/* 鼠标悬停状态 */
.custom-btn:hover {
  background-color: orange;
}

补充说明 #

• transition 属性是可选配置，添加后颜色变化会有0.3秒的平滑过渡，能提升用户体验
• 可根据需求调整 padding、border-radius 等属性，自定义按钮的大小、圆角等外观
• 现代浏览器均支持 :hover 伪类，无需额外兼容处理

内容的提问来源于stack exchange，提问作者Charliellis