CSS实现按钮边框动画效果

/* 定义按钮的基本样式 */
.button {
  border: 2px solid #1e90ff; /* 设置初始边框颜色和宽度 */
  padding: 10px 20px; /* 设置内边距 */
  border-radius: 5px; /* 设置边框圆角 */
  background-color: transparent; /* 设置背景颜色为透明 */
  color: #1e90ff; /* 设置文本颜色 */
  font-size: 16px; /* 设置字体大小 */
  cursor: pointer; /* 设置鼠标光标为指针形状 */
  outline: none; /* 去除点击按钮时产生的默认边框 */
  transition: border-color 0.3s ease-in-out; /* 设置边框颜色过渡动画 */
}
 
/* 当按钮处于悬浮状态时改变边框颜色 */
.button:hover {
  border-color: #000000; /* 设置悬浮时的边框颜色 */
}
 
/* 当按钮被点击时改变边框颜色 */
.button:active {
  border-color: #ffd700; /* 设置点击时的边框颜色 */
}

这段代码定义了一个按钮的基本样式，并且通过:hover和:active伪类选择器添加了悬浮和点击时的样式变化。通过transition属性还添加了一个边框颜色变化的平滑过渡效果。这是一个简单的CSS按钮边框颜色动画示例。