CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでスタイリングするinput typeの送信ボタン・リセットボタン

CSSでinput typeのsubmit・resetボタンをスタイリングする方法

フォームで使われるinput typeには、「submit（送信ボタン）」と「reset（リセットボタン）」があります。送信ボタンは入力した内容を送信するためのもので、リセットボタンは入力内容を初期状態に戻すためのものです。

CSSを活用すれば、Webページ上のあらゆるボタンを自由にデザインできます。デフォルトの無機質なボタンでも、背景色・枠線・文字色・余白・カーソルなどを指定することで、サイトの雰囲気に合った洗練された見た目にカスタマイズ可能です。

サンプルコード

以下のコードを実行して、input typeのボタンにスタイルを適用する方法を確認してみてください。

<!DOCTYPE html>
<html>
   <head>
      <style>
         input[type = submit], input[type = reset] {
            background-color: orange;
            border: none;
            text-decoration: none;
            color: white;
            padding: 20px 20px;
            margin: 20px 20px;
            cursor: pointer;
         }
      </style>
   </head>
   <body>
      <p>Fill the below form,</p>
      <form>
         <label for = "subject">Subject</label>
         <input type = "text" id = "subject" name = "sub"><br><br>
         <label for = "student">Student</label>
         <input type = "text" id = "student" name = "stu"><br>
         <input type = "reset" value = "Reset">
         <input type = "submit" value = "Submit">
      </form>
   </body>
</html>

コードのポイント

  • 属性セレクターの使用： input[type="submit"] と input[type="reset"] を組み合わせることで、両方のボタンに共通のスタイルを一括で適用しています。
  • 背景色と文字色： background-color: orange でボタンの背景をオレンジ色にし、color: white で文字を白くして視認性を高めています。
  • 枠線の削除： border: none でデフォルトの枠線を消し、フラットでモダンな印象に仕上げています。
  • 余白の調整： padding でボタン内部の余白を、margin でボタン同士の間隔を確保し、押しやすさと見た目のバランスを整えています。
  • カーソル表示： cursor: pointer を指定することで、マウスオーバー時に指型カーソルが表示され、クリックできる要素だと直感的に伝わります。

このように、数行のCSSを追加するだけでフォームのボタンの印象は大きく変わります。配色や余白を調整して、自分のサイトに合ったデザインに仕上げてみてください。

  1. CSSでhr要素（水平線）のスタイルを設定する方法をわかりやすく解説

    CSSを使ってhr要素（水平線）のスタイルを設定するには、borderプロパティを活用します。hr要素はデフォルトではシンプルな1本の線として表示されますが、border-topやborder-radiusなどを組み合わせることで、実線・破線・二重線・点線・角丸など、さまざまなデザインに自由にカスタマイズできます。以下に、代表的な5種類の水平線スタイルを実装したサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html> <meta name="viewport" content="width=device-

  2. CSSでラベルのスタイルを設定する方法｜色分けラベルの作り方

    CSSを使用すれば、<span>タグにクラスを割り当てるだけで、色分けされた見やすいラベル（バッジ）を簡単に作成できます。ステータスやカテゴリの表示に役立つため、Webアプリケーションや管理画面などでよく使われるテクニックです。 サンプルコード 以下は、CSSでラベルのスタイルを設定する具体的なコード例です。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"