ホームページ作成/フォームの活用・装飾 (HTML,CSS,JavaScript)

フォームのボタンにアイコンや装飾を加える

入力フォームなどに配置する「ボタン」の表面には、ただ文字を表示するしかないと思っていませんか? それ以外にも、任意のアイコンを表示させたり、色や書体を指定して装飾した文字列を表示させることができます。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

ボタンの表面に表示する内容も装飾できる

入力フォームなどに配置する「ボタン」の表面には、ただ文字を表示するしかないと思っていませんか?

ボタン上に表示する文字に色を加えたり装飾を加えたりすることもできますし、

ボタン表示例(※上記は画像で掲載しています。)

ボタン表示例(※上記は画像で掲載しています。)

さらに任意のアイコン「Color Ball」を加えたりすることもできます。

ボタン表示例(※上記は画像で掲載しています。)

ボタン表示例(※上記は画像で掲載しています。)

1つのボタン内にアイコンはいくつでも配置できますし、文字列も何行でも含められます。

ボタン表示例(※上記は画像で掲載しています。)

ボタン表示例(※上記は画像で掲載しています。)

これらのボタンは、その他の入力フォームと一緒に「送信ボタン」や「汎用ボタン」などとして利用可能です。

今回は、上記のようにアイコンや装飾された文字列を含んだ「ボタン」の作り方をご紹介いたします。

装飾されたボタンの作成方法へ >>

  • 1
  • 2
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます