如何为输入边框设置动画并使其从中心展开? [英] How to animate border on input and make it expand from center?

问题描述

我正在尝试在我的输入按钮上添加线性效果.当用户将鼠标悬停在按钮上时，我希望底部边界线从中心开始，然后同时向右和向左移动.因此，当用户将鼠标悬停在那条线上时，该线从中心扩展到各个角落.

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

推荐答案

您不能使用伪元素，因为它是输入标签，因此您可以尝试使用 linear-gradient code>作为背景:

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

这篇关于如何为输入边框设置动画并使其从中心展开?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！