2017
11.13

申込がどんどん増えるデザイン?CSSで作るボタン&フォーム

Bootstrap, CSS

こんにちは!

今日は久しぶりに自分のサイトを更新したので、備忘録。

フォームタグはPHPも使うので、デザインするとなるとけっこう面倒くさい。

何度も紹介しているけど、フィードバックがもらえないので、改善しようと思わなかったのが今回の反省点。

Bootstrapを使った超真面目なデザイン (笑 ↓
http://yukycohamabe.ciao.jp/Tomco/contact.html

押したくなるボタンを搭載した申し込みフォーム ↓
http://yukycohamabe.ciao.jp/Mini/contact.html

レスポンシブがまだ日本で主流になっていなかった頃、実装するのに苦労した経験から、、 かるーくトラウマになっていたボタンデザイン💧

かれこれ3年前、Bootstrapに乗り換えて以来、CSSでわざわざデザインしなくても Photoshopでインパクトのあるデザイン画像を作った方が良い!という結論にいたったので、CSSでのデザインを避けてきました。

しかし、今回払拭できました ♪

See the Pen Simple Responsive Table in CSS and nice Button by Yukyco (@yukyco) on CodePen.

コンタクトフォームのデザイン

実際に作ってOKをもらったLPで使ったボタン ↓

See the Pen Sold Button by Yukyco (@yukyco) on CodePen.

こちらは Illustratorでバナー並みにしっかりと作製。

JavaScriptのmouseoverを使って、クリック時に変色させる。

今までのLP製作では、気にする必要も不具合も無かったのですが、

JavaScript(jQuey)使いの人は、別ファイルで読み込むのが普通ということを学びました。

 

他にもボタンは沢山作って来たけど、sarukawakunのボタンは種類が豊富で、とっても便利です。

ちなみにボタンはやっぱり無地がいいなと思います。

賑やかすぎるのは、×ですね💧

失敗例: 

改善例: 

 

☆参考にさせて頂いたサイト☆

CSSで作る!押したくなるボタンデザイン100(Web用)

https://liginc.co.jp/web/html-css/html/86739

 

【PR】
ホームページとPortfolioを更新しました!
YUKYCO



コメント

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

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