HTML表单input submit按钮CSS样式失效，求文本化及悬停效果方案

要把submit按钮改成纯文本样式，核心是清除浏览器给按钮自带的默认样式，再按需设置悬停效果。你的原代码存在几个问题：重复设置background-color（none是无效值，应该用transparent），没清除默认边框、内边距，且悬停时没修改字体颜色。

修改后的完整代码如下：

CSS 代码 #

input[type="submit"] {
  font-family: made, mirage;
  /* 清除浏览器默认按钮样式 */
  border: none;
  outline: none;
  background-color: transparent;
  /* 设置初始文本样式 */
  color: #383e42;
  padding: 0;
  cursor: pointer;
  /* 可选：添加下划线，更贴近文本链接的视觉 */
  text-decoration: underline;
}

input[type="submit"]:hover {
  background-color: #383e42;
  color: white;
  /* 可选：增加内边距扩大点击区域，优化交互 */
  padding: 2px 4px;
  border-radius: 3px;
}

HTML 代码（无需修改） #

<form action="" method="post">
  <input type="text" name="yourmail" placeholder="Váš e-mail:">
  <input type="text" name="subject" placeholder="Předmet:">
  <textarea name="message" placeholder="Text správy" rows="10"></textarea>
  <input type="submit" name="send-mail" id="" value="Odeslat" />
</form>

关键属性说明：

• border: none + outline: none：彻底去掉按钮默认的边框和聚焦轮廓，让它看起来和普通文本一致
• background-color: transparent：设置透明背景，消除按钮的默认底色
• 悬停时同时修改background-color和color，实现背景与文字颜色的切换
• 可选的padding和border-radius是为了提升交互体验，让点击区域更大，视觉更柔和

内容的提问来源于stack exchange，提问作者PandiG