按钮模版：btn-light-2

预览效果

<div class="container">
  <button class="btn-light-2">View Room</button>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  width: 100%;
  height: 200px;
}
.btn-light-2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 28px;
  border: 2px solid #3498db;
  border-radius: 4px;
  background-color: transparent;
  color: #3498db;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.btn-light-2:hover {
  background-color: #3498db;
  color: #fff;
}

代码解析

HTML 结构

按钮的 HTML 结构非常简洁，仅包含一个带有文本内容的 button 元素：

<button class="btn-light-2">View Room</button>

简洁的结构使得这个按钮模板易于集成到各种项目中。

CSS 实现原理

该按钮设计的核心技术在于颜色反转效果：

1. 基础样式：按钮设置了固定的内边距、2px 宽度的边框、圆角样式
2. 初始状态：按钮默认状态为透明背景，文字颜色与边框颜色相同（#3498db）
3. 悬停效果：当鼠标悬停时，按钮背景颜色变为边框颜色，文字颜色变为白色，形成颜色反转效果
4. 过渡动画：所有变化都通过 transition 属性设置了 0.3s 的平滑过渡效果
5. 对齐方式：使用 flex 布局确保按钮文本垂直和水平居中

使用方法

1. 复制 HTML 结构：将 HTML 代码块中的容器和按钮元素复制到你的网页中。
2. 添加 CSS 样式：将 CSS 代码块中的样式规则复制到你的样式表中。
3. 调整按钮大小：可以修改 padding 属性值来调整按钮的大小。
4. 自定义颜色方案：可以将 #3498db 替换为你喜欢的颜色值。
5. 调整动画速度：可以修改 transition 属性中的 0.3s 值来调整动画速度。

浏览器兼容性

注意事项

1. 浏览器兼容性：所有主流现代浏览器都支持此功能
2. 性能考虑：动画效果简单，对性能影响较小