CSS 输入类型submit周围的href

在本文中，我们将介绍如何在HTML中使用CSS为输入类型submit按钮周围的链接添加样式。

阅读更多：CSS 教程

输入类型submit按钮的基础样式

输入类型为submit的按钮是用于提交表单的按钮。当我们在HTML中使用时，默认情况下会显示一个带有浏览器默认样式的按钮。但是我们可以使用CSS来自定义按钮的样式。

首先，在HTML中创建一个提交按钮的实例：

<input type="submit" value="Submit">

在没有添加任何CSS样式之前，该按钮将显示为浏览器的默认样式。

使用CSS设置按钮样式

我们可以使用CSS中的伪类选择器和属性来更改按钮的样式。首先，我们将使用伪类选择器:hover来设置鼠标悬停时按钮的背景颜色和文本颜色:

input[type="submit"]:hover {
  background-color: #ff0000;
  color: #ffffff;
}

上面的代码表示当鼠标悬停在按钮上时，按钮的背景颜色将变为红色，文本颜色将变为白色。

我们还可以使用伪类选择器:focus来设置按钮在获得焦点时的样式：

input[type="submit"]:focus {
  outline: none;
  box-shadow: 0 0 2px #0000ff;
}

上面的代码表示当按钮获得焦点时，将取消按钮的默认轮廓样式，并在按钮周围添加一个蓝色的阴影。

为按钮周围的链接添加样式

有时我们希望在提交按钮周围添加一个链接，以便用户点击查看相关内容。但是默认情况下，链接会与按钮重叠或干扰按钮的点击事件。我们可以使用CSS为链接添加样式，以解决这个问题。

首先，为链接创建一个容器div，并将链接放入其中：

<div class="link-container">
  <a href="#" class="button-link">Learn More</a>
  <input type="submit" value="Submit">
</div>

接下来，我们可以使用CSS为链接容器和链接本身添加样式：

.link-container {
  display: inline-block;
  position: relative;
}

.link-container .button-link {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  padding: 5px 10px;
  background-color: #0000ff;
  color: #ffffff;
  text-decoration: none;
}

.link-container .button-link:hover {
  background-color: #ff0000;
}

上面的代码将链接容器设置为inline-block，并相对定位。链接本身使用绝对定位，位于按钮的右侧。使用transform属性将链接垂直居中，再使用padding属性设置链接的内边距。最后，设置链接的背景颜色，文本颜色和无下划线的文字装饰。当鼠标悬停在链接上时，链接的背景颜色将变为红色。