鼠标未点击按钮时，按钮边框颜色固定，当鼠标悬停到按钮上时，边框出现一条围绕边框移动的光线

好的，根据您的需求，可以使用CSS的伪类选择器来实现这个效果。以下是一个简单的示例代码：

HTML代码：

<button class="dynamic-button">动态按钮</button>

CSS代码：

.dynamic-button {
  border: 2px solid #ccc; /* 设置初始边框样式 */
  padding: 10px;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.dynamic-button::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.dynamic-button:hover::before {
  border-color: #4CAF50; /* 设置悬停时边框颜色 */
}

.dynamic-button:focus {
  outline: none;
}

.dynamic-button:active::before {
  border-color: #f44336; /* 设置点击时边框颜色 */
}

通过设置 `::before` 伪元素，使用 `transition` 属性实现边框颜色变化的动画效果，同时使用 `position` 和 `overflow` 属性实现边框光线的隐藏和显示。