ButtonのStateパターン変更

[herablog]

詳細は後で追加します。

変更内容

「ボタンをタップ→クライアントvalidationエラーが発生して画面遷移しない」場合に、hover時の濃いスタイルが残り続けてしまうのが違和感がある、というフィードバックを受けて、ボタンらしいbuttonの各Stateのスタイルの見直しを行いました。

変更後、ブラウザごとのStateによる見た目の違い

• Android Chrome: タップ時に :active のスタイルが表示される
• iOS Safari: タップ時に tap-highlight-color がUIの上に重なって表示される
  • active時のスタイルは適用されないため、表示されない
• PCブラウザ: クリック時に :hover と :active が表示される
  • IEでは @media hover がサポート外のため :hover が表示されない
  • ボタンらしいbuttonに限定して変更することにしたのはこのため（＝hoverしなくても押せることが想起できるデザインのボタンのみに適用）

ref: 認証プロジェクトの #373