Input type button无法显示CSS hover效果问题求助

核心问题 #

<input type="button">属于替换元素，浏览器对这类元素的:before/:after伪元素支持性极低，甚至完全不渲染——而你的发光效果完全依赖:before伪元素实现，所以hover效果失效。<button>是常规块级元素，伪元素可以正常工作。

解决方案 #

方案1：直接替换为<button>标签（推荐） #

如果业务逻辑允许，直接用<button class="button">Click</button>替代input按钮，无需修改CSS，这是最省心的方案。

方案2：给input套容器，转移伪元素到容器上 #

如果必须保留<input type="button">，可以给它包裹一个容器，把发光效果的伪元素绑定到容器上，具体修改如下：

修改后的HTML

<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Glowing Button on Hover</title>
</head>
<body>
  <button class="button">Hover Me</button>
  <!-- 给input套一个容器 -->
  <div class="button-wrap">
    <input type="button" class="button-inner" value="Click">
  </div>
</body>
</html>

修改后的CSS

@import url("https://fonts.googleapis.com/css?family=Raleway:300");
* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  height: 100vh;
  background: black;
  align-items: center;
  justify-content: center;
  gap: 20px; /* 增加间距区分两个按钮 */
}

/* 容器负责伪元素发光效果 */
.button-wrap {
  position: relative;
  height: 60px;
  width: 200px;
  border-radius: 5px;
}

.button-wrap:before {
  position: absolute;
  content: '';
  top: -2px;
  left: -2px;
  height: calc(100% + 4px);
  width: calc(100% + 4px);
  border-radius: 5px;
  z-index: -1;
  opacity: 0;
  filter: blur(5px);
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  background-size: 400%;
  transition: opacity .3s ease-in-out;
  animation: animate 20s linear infinite;
}

.button-wrap:hover:before {
  opacity: 1;
}

.button-wrap:active:before {
  filter: blur(2px);
}

/* 按钮本身的样式 */
.button, .button-inner {
  position: relative;
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  color: white;
  background: #111;
  cursor: pointer;
  border-radius: 5px;
  font-size: 18px;
  font-family: 'Raleway', sans-serif;
}

.button:hover:active, .button-wrap:active .button-inner {
  background: none;
}

@keyframes animate {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

补充说明 #

替换元素（如<input>、<img>、<select>）的内容由浏览器或外部资源控制，浏览器不会为它们生成伪元素的渲染上下文，因此依赖伪元素的样式无法生效。通过容器包裹的方式，把伪元素转移到非替换元素上，就能解决这个兼容性问题。

内容的提问来源于stack exchange，提问作者Abdulkadir Açıl