实现鼠标悬停时边框两侧增长的按钮效果（HTML+CSS）

要实现一个当鼠标悬停（hover）时边框两边生长的按钮效果，我们可以使用HTML和CSS。这里的关键是使用CSS的transition属性来平滑地过渡边框宽度的变化，以及:hover伪类来定义鼠标悬停时的样式。

以下是一个简单的实现示例：

HTML

<button class="grow-border-btn">点击我</button>

CSS

.grow-border-btn {  
  padding: 10px 20px; /* 按钮内边距 */  
  border: 2px solid #000; /* 初始边框 */  
  background-color: #fff; /* 背景色 */  
  color: #000; /* 文字颜色 */  
  cursor: pointer; /* 鼠标悬停时显示手指形状 */  
  transition: border-width 0.3s ease; /* 平滑过渡效果 */  
  position: relative; /* 为了后续可能的定位需要 */  
  display: inline-block; /* 使得按钮可以和其他元素并排显示 */  
}  
  
.grow-border-btn:hover {  
  /* 当鼠标悬停时，左右边框宽度增加 */  
  border-left-width: 10px;  
  border-right-width: 10px;  
  /* 如果需要，可以调整padding来保持按钮内部内容的布局不变 */  
  /* padding-left: 15px;  
  padding-right: 15px; */  
}

在这个例子中，.grow-border-btn 类定义了按钮的基本样式，包括内边距、边框、背景色、文字颜色、鼠标悬停时的光标样式以及过渡效果。:hover 伪类用于定义鼠标悬停时边框宽度的变化。

注意，当边框宽度增加时，按钮的总宽度也会相应增加，这可能会影响到页面布局。如果你希望按钮的总宽度保持不变，可以通过调整padding来平衡边框宽度的增加，但在这个例子中，我保留了原始的内边距以展示效果。

此外，transition 属性用于定义边框宽度变化的过渡效果，包括过渡时间（0.3秒）和过渡方式（ease，即平滑过渡）。你可以根据需要调整这些值。