ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLボタンを作成できるタグはどれか（画像と文字で詳しく解説）

HTMLボタンを作成できるタグはどれか（画像と文字で詳しく解説）

yuliaオリジナル: 2018-10-26 15:14:5910536ブラウズ

ページを頻繁に作成したり、Web サイトを頻繁に閲覧したりする人はボタンに精通しているはずです。HTML と CSS を学習している友人、HTML ボタンのコードを書けますか?ボタンの作成にはどのようなタグを使用できますか?この記事では、HTML ボタンのスタイルを作成するための 3 つのタグ (メソッド) を例に基づいて紹介します。興味のある友人は参照してください。

ボタンを作成するには、HTML と CSS の特定の基礎が必要です。不明な場合は、PHP 中国語 Web サイトの関連記事を参照するか、HTML ビデオチュートリアル、にアクセスしてください。 CSS ビデオチュートリアル、これがお役に立てば幸いです。

方法 1: button タグ

インスタンスの説明:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   .button{border: none;background: green;padding: 15px 30px;font-size: 20px;color: white;cursor: pointer;}
  </style>
 </head>
 <body>
  <button class="button">button</button>
 </body>
</html>

効果は図に示すとおりです:

HTMLボタンを作成できるタグはどれか（画像と文字で詳しく解説）

方法 2:タグ

インスタンスの説明: a タグを使用してボタンを作成し、ボタンの背景色を赤に設定し、フォントサイズを 25 ピクセルに設定し、text-decoration: none を使用して a タグの下線を削除し、次を使用します。 border-radius: 10px、ボタンに角丸効果を持たせます。具体的なコードは次のとおりです:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   body{margin: 50px 100px;}
   .a{text-decoration: none;padding: 20px 35px;background: red;font-size: 25px;border-radius: 10px;color: white;}
  </style>
 </head>
 <body>
  <a href="#" class="a">按钮a</a>
 </body>
</html>

効果画像:

HTMLボタンを作成できるタグはどれか（画像と文字で詳しく解説）

##メソッド。 3: input タグ

type が submit に設定されている場合、入力データの種類を設定できます。送信ボタン。タイプがリセットに設定されている場合、リセットボタンを表します。

インスタンスの説明: CSS を使用して送信ボタンを美しくし、背景色をピンク、フォントの色を黒、フォントサイズを 30px に設定し、border-radius: 20px を使用して角丸を設定します。リセットリセットボタンの設定は行われません。具体的なコードは次のとおりです。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   .submit{border: none;padding: 30px 45px;background: pink;border-radius: 20px;font-size: 30px;}
  </style>
 </head>
 <body>
  <form action="" method="post">   
   <input type="submit" value="submit" class="submit"/><br>   
   <input type="reset" value="reset" class="reset"/>
  </form>
 </body>
</html>

レンダリング:

HTMLボタンを作成できるタグはどれか（画像と文字で詳しく解説）

要約: Make html ボタンボタンタグ、タグ、入力タグの 3 つの方法があります (入力タグは送信ボタンとリセットボタンの 2 種類に分かれます)。具体的にどのタグを選択するかは、個人の習慣や作業によって異なります。必要です。

上記では、どのタグを使用してボタンを作成できるかを紹介しました。初心者の方は、ぜひ自分で試して、より美しいボタンを作成できるかどうかを確認してください。関連チュートリアルの詳細については、

HTML5 フルバージョンマニュアル
をご覧ください。

以上がHTMLボタンを作成できるタグはどれか（画像と文字で詳しく解説）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：キャプションタグの意味とその使用方法 (コード付き)次の記事：キャプションタグの意味とその使用方法 (コード付き)

続きを見る