HTMLボタンを作成できるタグはどれか（画像と文字で詳しく解説）-htmlチュートリアル-php.cn

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

yulia

リリース： 2018-10-26 15:14:59

オリジナル

10485 人が閲覧しました

ページを頻繁に作成したり、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>

ログイン後にコピー

効果画像:

##メソッド。 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ボタンを作成できるタグはどれか（画像と文字で詳しく解説）