html - How to animate border on input and make it expand from center?

Question

Im trying to add a linear effect on my input button. When the user hovers on the button, I want the bottom border line to start from center, and then go to right and left at the same time. So the line spreads out from center to the corners when the user hovers over it.

I managed to add a hover line, but it does not work as I want. I have looked around and I can only find questions regarding headings or tabs, not buttons.

#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

You cannot use pseudo-element since it's an input tag so you can try this solution with linear-gradient as background:

#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">