2017
11.27

input要素にボタンを指定してマウスホバーを施す方法

CSS, CSS3, HTML, HTML5

引き続きinput要素のデザインでてこずっています。頭の整理整頓をまめにしていかないと、デザインすらできないですね。

今回やりたい事は、申し込みフォームのデザインです。

細かい部品が12箇所あり、頭が混乱しています。こういう場合は紙に書くなり、web上にアウトプットしながらひとつずつ決めていく必要がありますよね。

今回の課題
・登録ボタンのデザイン
・マウスホバー効果を施す

1. 登録ボタンのデザインは、画像にするのかそれともCSSにするのかを決める

今回は小さいボタンで12か所あるので、CSSで描くことにします。

2. input要素に送信ボタンを設定する

(*ボタンを画像にする場合は imageを指定する。)

 

3. ボタンにマウスをのせると変色させる設定をする

デモページ

 

参考ページ:https://www.nishishi.com/css/design-only-button.html

 

 

 

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。