HTML / CSS 田中洋介

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

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

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

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

HTML / CSS按钮类型

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

[按钮跳转到另一页]

[登录/新注册按钮]

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

[表单按钮]

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

使用场景 如何使用
使用CSS创建的常用按钮 用于“波动”,“转到特定页面”按钮,“返回”按钮到原始屏幕等。 类=”通过将类名(例如btn btn-default)与CSS和标签结合在一起来创建按钮
使用按钮标签的常规按钮 用于“波动”,“转到特定页面”按钮,“返回”按钮到原始屏幕等。 纽扣 type=”button”など専用タグを用いて作成
表单中的按钮 将输入信息数据(例如“登录”,“新注册”和“提交表单内容”)发送到另一个文件时,创建一个专用按钮。 输入类型=”submit”
纽扣 type=”submit”を用いて作成

如何制作使用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”我通常不关心“”之间的区别,所以让我们借此机会来理解它。

撰写本文的人

田中 陽介

我在越南开展业务,并且从事与人事相关的咨询业务。我离开日本已经八年了,我享受着日本不可能发生的事情。最近,我正在使用Ruby on Rails进行Web服务。