如何为输入设置动画边框并使其从中心扩展？

Question

我试图在我的输入按钮上添加线性效果。当用户将鼠标悬停在按钮上时，我希望底部边框线从中心开始，然后同时向右和向左移动。因此，当用户将鼠标悬停在它上面时，这条线会从中心扩展到角落。

我设法添加了一条悬停线，但它没有按我的意愿工作。我环顾四周，只能找到有关标题或标签的问题，而不是按钮。

#btn {
  margin: 10px;
  padding: 20px;
  width: 470px;
  height: 50px;
  border: 2px solid #f7f7f7;
  text-align: center;
  text-transform: uppercase;
  position: relative;
}

#btn:hover {
  cursor: pointer;
  border-bottom: 2px solid red;
  transition: 0.3s;
}

<input id="btn" type="submit" name="" value="Click">

Answer 1

您不能使用伪元素，因为它是一个输入标签，因此您可以尝试使用 linear-gradient 作为背景的解决方案：

#btn {
  margin: 10px;
  padding: 20px;
  width: 470px;
  height: 50px;
  border: 2px solid #f7f7f7;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  background: 
    linear-gradient(red, red) bottom / 0% 2px no-repeat
    #ccc;
  transition: 1s;
}

#btn:hover {
  background-size: 100% 2px;
}

<input id="btn" type="submit" name="" value="Click">