按钮模版：btn-light-1

预览效果

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

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  width: 100%;
  height: 200px;
}
.btn-light-1 {
  width: 120px;
  height: 52px;
  position: relative;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  background-color: transparent;
  transition: all 0.4s ease-in-out;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  z-index: 1;
}
.btn-light-1:before {
  content: "";
  width: 4px;
  height: inherit;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  background-color: #333;
  border-radius: 2px;
  transition: all 0.4s ease-in-out;
  z-index: -1;
}
.btn-light-1:hover {
  color: #fff;
}
.btn-light-1:hover:before {
  width: 100%;
}

代码解析

HTML 结构

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

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

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

CSS 实现原理

该按钮设计的核心技术在于左侧边框扩展动画效果：

1. 基础样式：按钮设置了固定的宽度、高度、字体大小和圆角样式
2. 左侧边框：通过 ::before 伪元素创建一个固定宽度的左侧边框
3. 悬停效果：当鼠标悬停时，左侧边框通过 width 属性从 4px 扩展到 100%，同时文字颜色变为白色
4. 过渡动画：所有变化都通过 transition 属性设置了 0.4s 的平滑过渡效果
5. 层级控制：使用 z-index 确保伪元素在按钮内容下方

使用方法

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

浏览器兼容性

注意事项

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