フォームのsubmitボタンのデザインを変更する方法(CSS)

フォームの「送信」「検索」「投稿」などのsubmitボタンをCSSで変更する方法を記述する。

といっても、他の要素とやることは変わらず、input要素にCSS設定するだけ。

試しに色々なsubmitボタンを作りながら以下で説明していく。

submitボタンのデザイン変更方法

CSSとHTMLを別に分けるケースで説明する。HTMLからCSSを読み込む方法が分からない方は、以下のリンクを参考にしていただきたい。
HTMLからCSSファイルを呼び出す方法

以下のように、HTMLでinputタグ内にid=”submit_button”と指定して、CSSでinput#submit_buttonを指定した。idでなくclassでも良いだろう。

HTMLファイル

<!-- 今回はidを指定 -->
<input id="submit_button" type="submit" name="submit" value="投稿する">

CSSファイル

input#submit_button {
    // ここにCSSコードを書く
}

今回CSSを指定していないので、以下のようなデフォルトのデザインとなる。

submitボタンのデザイン変更 – サンプル集

1. まずはデフォルトの窮屈なボタンを大きく表示してみる。CSSにwidthとheightを指定すればよい。

HTMLコードは上記のものと同じ。

幅と高さを指定 – CSSファイル

input#submit_button {
    // 幅と高さを指定
    width: 150px;
    height: 50px;
}

できあがりは以下のようになる。

2. 1では文字数に対して自動的に幅調節ができないので、paddingで指定してみる。CSSにpaddingを指定すればよい。

HTMLコードは上記のものと同じ。

余白の指定 – CSSファイル

input#submit_button {
    // ボタンの余白を設定
    // 縦方向に20px、横方向に50pxという意味
    padding: 20px 50px;
}

できあがりは以下のようになる。

3. 今度は2に加えて、文字サイズを少し大きくしてみる。CSSでfont-sizeを指定すればよい。これに伴ってやけにボタンがでかく感じたので、paddingを少し小さくした。

HTMLコードは上記のものと同じ。

文字サイズ、余白の変更 – CSSファイル

input#submit_button {
    padding: 15px 40px;
    font-size: 1.2em;
}

できあがりは以下のようになる。

4. 続いては、3に加えて背景色、文字色を指定してみる。

HTMLコードは上記のものと同じ。

背景色、文字色、ボーダーの変更 – CSSファイル

input#submit_button {
    padding: 15px 40px;
    font-size: 1.2em;
    // 背景色を黒に指定
    background-color: #000;
    // 文字色を白に指定
    color: #fff;
    // submitボタンのを枠を非表示にする
    border-style: none;
}

できあがりは以下のようになる。

2012/10/15:この記事で紹介しきれなかった部分をbutton要素のデザインを変更する方法(HTML、CSS)でご紹介。デモページも設けて、より複雑な指定を紹介する。

関連記事

HTMLからCSSファイルを呼び出す方法
リンクテキスト色の設定方法(HTML、CSS)
画像の枠線を消すCSS設定

コメント

  • > 1. まずはデフォルトの窮屈なボタンを大きく表示してみる。CSSにwidthとheightを指定すればよい。

    > できあがりは以下のようになる。

    heightは適応されてないですよ

    2015年12月10日 5:55 PM| 匿名

  • […] その他のアイコンのunicodeはCheatsheetへ 参照サイト placeholderの色を変える、CSSでスタイルを付加する。 フォームのsubmitボタンのデザインを変更する方法(CSS) […]

    2015年9月26日 1:03 PM| HTML5の入力フォームをFontAwesomeを使ってカスタマイズ | bon voyage

コメントを残す

メールアドレスが公開されることはありません。

This blog is kept spam free by WP-SpamFree.

コメントフィード

トラックバックURL: http://monopocket.jp/blog/css/1113/trackback/