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

您无法使用伪元素，因为它是输入标记（就像您可以在其他解决方案中找到的那样），因此您可以使用{尝试此解决方案{1}}作为背景：

＆＃13;

FILE_READ_ATTRIBUTES | SYNCHRONIZE

＆＃13;

linear-gradient

＆＃13;

如何在输入上添加线性悬停效果？

1 个答案: