如何使用HTML和CSS创建按钮|如何使用按钮标签创建，提交，链接

“你怎么做按钮？”
“我怎么做按钮？”

您可以轻松创建通常在网站和智能手机应用程序上看到的按钮。因此，我想知道习惯于生产的人们是否有知识来更多地了解“按钮”，但是答案是“是”。如果您刚刚开始学习，那么您应该了解的更多。

在网络和应用程序制作中，我们专注于学习困难的技术，并且不再研究如何再次制作“按钮”。我以某种方式知道这是按钮功能。实际上，如何使用按钮取决于情况。这次，我们将整理信息，并为您提供有关按钮的正确知识。那些刚刚学习的人应该获得对生产有用的“意识”。相反，本文不适用于已经在Web生产和应用程序生产中一遍又一遍的中级和高级用户。

[对于初学者]仔细解释如何编写CSS（样式表）

HTML / CSS按钮类型

在各种情况下都可以看到按钮。您还可以使用按钮标签并使用CSS装饰创建按钮。

[按钮跳转到另一页]

[登录/新注册按钮]

表单上的按钮与上面的按钮不同。如果您按它，输入的信息将被传递到另一个文件。换句话说，该过程将应用于按钮。这是与其他按钮的区别。

[表单按钮]

所有按钮看起来都一样，但是有三种主要的制作方法。

如何制作使用HTML和CSS制作的按钮

首先让我们创建一个简单的按钮。有一个方便的按钮标签，但是在这里我将不使用它。让我们编写如下代码。
按下按钮将导致某些动作。在下面，写上“标签”，以便您可以通过按按钮移动到另一页。

<a href="/contact.html" 类="btn">これはボタンです。</a>

在CSS中，我们进行如下设置。

.btn{
  border: 1px solid green;
  border-radius: 5px;
  background-color: green;
  padding: 20px;
  text-align: center;
  color: white;
  width: 150px;
}

然后，将显示如下。按钮显示没有问题。但是，由于它是一个内联元素，因此存在一些限制。您可以设置宽度，但不能使用边距设置高度，因此，如果要设置它，则需要将其包含在“ div”标签中并单独设置。

您还可以在其中显示一个图标。

<a href="/contact.html" 类="btn">これはボタンです。<i 类="fas fa-angle-right"></i></a>

现在，您知道无需使用标签即可轻松创建按钮。

使用div标签或标签创建按钮时的注意事项

在这种情况下，有一个警告。换句话说，您可以创建它，但是读取语音的浏览器无法将其识别为按钮。如果您使用标签来做，它将被识别为“链接”。因此，如果您希望被识别为按钮，则“ role =“，如下所示”button”」を入れる必要があります。

<a href="/contact.html" 类="btn"　role="button">これはボタンです。<i 类="fas fa-angle-right"></i></a>

创建按钮时，使用专用的按钮标签创建按钮更为安全。

使用HTML / CSS按钮标签创建按钮

HTML具有显示按钮的“按钮标签”。通常，这比使用CSS装饰设计更常用。不要忘记有两个按钮标签，一个开始标签和一个结束标签。

<button>これはボタンです。</button>

仅此一项将其显示为按钮。

当然，仅此一项不足以进行设计，因此您需要在CSS中进行设置。将type属性“ 纽扣”和类设置为button标记，然后设置CSS。

<button type="button" 类="btn"　autofocus="true">これはボタンです。</button>

.btn{
  border-radius: 5px;
  background-color: green;
  padding: 20px;
  text-align: center;
  color: white;
}

它将显示如下。它比我之前在CSS中编写的代码少。另外，“自动聚焦属性”有效并显示聚焦。此外，还有更好的好处。

例如，指定“高度”或“边距”。为了清楚起见，将“高度”指定为100px。

.btn{
  border-radius: 5px;
  background-color: green;
  padding: 20px;
  text-align: center;
  color: white;
  height: 100px;
  margin: 50px;
}

然后，它被认为是一个块元素，因此可以立即设置高度和边距。如果您使用a标签创建了按钮，则必须将其包含在div标签中，但现在不必这样做。

现在，如果要设置链接，是否应该在按钮标签中设置它？让我们编写以下代码。

<button 类="btn" type="button"><a href="index.html">これはボタンです。</a></button>

结果是单击一个字母将移动页面，但是单击一个按钮将不会移动页面。首先，此按钮标记具有“元素不能为后代”的规范。因此，下面说明在按钮中使用“ onclick属性”的便捷方法。

当将HTML / CSS按钮标记与Javascript一起使用时

顺便说一句，它是除表单以外用于页面导航的按钮，但是如果将其与简单的Javascript语法一起使用，则可以实现便捷的功能。有些人在听到Javascript时可能会感到被拒绝，但基本上它是一个副本。&介绍可以通过粘贴轻松安装的功能。

安装链接按钮

首先，在标记中设置“ onclick”，并在其中设置“ location.href”。将路径设置为此“ href”。顺便说一下，此“ onclick”是Javascript语法之一，您可以在单击按钮后设置处理。

<button 类="btn" type="button" onclick="location.href='移動先のファイルのパスを書く'">これはボタンです。</button>

您可以看到该按钮仍然显示，并且可以转到该页面进行设置。

安装“后退”按钮

例如，添加预订功能时，输入一些信息时，除了“确认按钮”之外，有时还需要在上一页设置“返回”按钮。当然，如果您编写上一页的路径，这就是解决方案，但是每次设置它都需要花费时间。

因此，将以下语法放在“ onclick”中。

<button 类="btn" type="button" onclick="history.back()">これはボタンです。</button>

现在，您将自动返回上一页。

使用HTML / CSS放置在表单中的按钮

这是在假设有查询表格和登录按钮的情况下创建的，但是需要以下两项理解。换句话说，表单中要使用的按钮是固定的，有以下两个。总而言之，两者都可以形式使用，但后者是“ 纽扣 type =“，因为它易于在CSS中使用。”submit”」がよいでしょう。

• 输入类型=”submit”
• 纽扣 type=”submit”

输入类型=”submit”

在这种情况下，请如下所示使用“输入元素”。在这种情况下，可以使用value属性显示字符，而无需使用结束标记。

<form action="./mailbox/post.cgi" method="post">
　　<input type="submit" value="送信">
</form>

默认按钮非常简单，如下所示。

在这种情况下，可以通过分配一个类名并基于该类名使用CSS设计按钮来创建“提交按钮”或“重置”按钮（在这种情况下，将“提交”更改为“重置”）。去做。

.btn{
  display: inline-block;
  border-radius: 5px;
  background-color: green;
  padding: 10px;
  text-align: center;
  color: white;
  width: 80px;
}

它将显示如下。

通过组合输入元素和图标来创建按钮。

现在，在这种情况下，例如，您如何满足在“提交”或“重置”按钮上放置图标的需求？实际上，这很烦人。总之，由于这些需求，现在更常见的是在表单中使用“按钮标签”。

但是，一次，“输入类型=”submit”我将告诉您如何显示图标。请按如下方式重写html。该图标是任意的。关键是“输入元素”部分被隐藏，仅显示图标。
字体很棒

<label>
  <!-- この部分を表示させる -->
  <span 类="filelabel" title="送信">
     <i 类="fab fa-adn"></i>送信
  </span>
  <!-- この部分は表示上から隠す -->
  <input type="submit" id="send">
</label>

接下来，在CSS中进行如下设置。

.filelabel {
   display: inline-block;
   border: 1px solid green;
   background-color: green;
   color: white;
   border-radius: 5px;
   padding: 15px;
}
#send {
   display: none;
}

图标和字符如下所示显示。

创建一个带有按钮标签的按钮。

如果您发现通过组合输入元素和图标来创建按钮有点困难，请不要犹豫地说“按钮类型=””submit”请用。您可以非常简单地获得与上述相同的效果。

<button type="submit" 类="btn">
 <i 类="fab fa-adn"></i>送信
</button>

.btn{
  display: inline-block;
  border-radius: 5px;
  background-color: green;
  padding: 15px;
  text-align: center;
  color: white;
  width: 100px;
  font-size: 15px;
}

结果是相同的，但是这里的代码要简单得多。

顺便说一句，“输入类型=”submit”」の大きな違いの一つとして、inputは：之前、：之后您不能使用诸如这样的伪元素，但是由于可以将它们与按钮一起使用，因此可以使用CSS相对自由地表达它们。例如，让我们编写以下CSS。

　　<button type="submit" 类="btn">送信</button>

以下是CSS，但是使用了伪元素。

.btn{
  position: relative;
  display: inline-block;
  border-radius: 5px;
  background-color: green;
  padding: 15px;
  text-align: center;
  color: white;
  width: 100px;
  font-size: 15px;
}
.btn:after{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 6px;
  height: 6px;
  margin: -4px 0 0 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

然后，显示伪元素。按钮标签也可以这种方式。考虑使用CSS进行装饰时，“按钮类型=”submit”请注意，“”更为方便。

简介：让我们了解HTML / CSS按钮！

由于它是易于创建的“按钮”，因此往往难以理解。如果要创建按钮，最好使用button标记。另外，格式为“输入类型=“”submit”」と「button type=”submit”我通常不关心“”之间的区别，所以让我们借此机会来理解它。

[复制和粘贴修改成功]仅可使用CSS进行的10个按钮设计