如何让type="submit"的input按钮拥有与导航栏按钮相同的CSS样式？

当然可以！其实方法很简单——我们只需要把导航栏按钮的样式抽成可复用的CSS类，再将这个类应用到submit按钮上，同时调整按钮的默认浏览器样式，就能实现完全一致的视觉效果。

具体步骤： #

1. 重构CSS代码，抽离通用样式类
   把原来导航栏中<a>标签的样式抽成一个独立的类（比如.nav-style），这样不管是链接还是按钮都能复用这套样式。同时我们需要重置submit按钮的默认样式，让它摆脱浏览器自带的按钮外观：

/* 导航栏原有容器样式保留不变 */
nav { 
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
  background: linear-gradient(#ffffff, #f5f5f5); 
  grid-area: nav; 
  font-weight: bold; 
}
nav ul { 
  list-style: none; 
  margin: 0; 
  display: block; 
}
nav li { 
  padding: 13px 20px; 
  display: inline-block; 
}

/* 抽离的通用样式类，适用于导航链接和submit按钮 */
.nav-style {
  text-decoration: none; 
  color: #000000; 
  position: relative; 
  transition: all ease-in-out 250ms;
  font-weight: bold;
  background: none; /* 移除按钮默认背景 */
  border: none; /* 移除按钮默认边框 */
  cursor: pointer; /* 鼠标悬停显示手型 */
  font-size: inherit; /* 继承父元素字体大小 */
  padding: 0; /* 按钮不需要额外内边距，内边距由外层li或容器控制（如果按钮不在nav里） */
}

.nav-style::after { 
  content: ''; 
  position: absolute; 
  display: block; 
  height: 0.3em; 
  background-color: #000000; 
  bottom: -0.9em; 
  transition: all ease-in-out 350ms; 
  left: 0; 
  width: 0; 
}

.nav-style:hover::after { 
  width: 100%; 
}

.nav-style:hover { 
  color: rgb(0, 0, 0); 
}

2. 更新HTML结构，应用样式类
   给导航栏的所有<a>标签加上.nav-style类，同时给submit按钮也添加这个类：

导航栏HTML：

<nav>
  <ul>
    <li><a href="index.php" class="nav-style">Domů</a></li>
    <li><a href="switcher.php" class="nav-style">Fun Switcher</a></li>
    <li><a href="#" class="nav-style">Radio</a></li>
    <li><a href="#" class="nav-style">Fotky</a></li>
    <li><a href="#" class="nav-style">Games</a></li>
    <li><a href="#" class="nav-style">Chat</a></li>
  </ul>
</nav>

Submit按钮示例：

<!-- 表单中的submit按钮 -->
<form action="#" method="post">
  <!-- 其他表单控件 -->
  <input type="submit" value="提交表单" class="nav-style" />
</form>

额外说明： #

如果你的submit按钮不在导航栏的<li>容器里，记得给按钮外层添加和<li>一样的padding: 13px 20px样式，这样按钮的整体间距会和导航栏按钮完全一致。

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