個人ブログのようなものです。とくにジャンルはありません。
記事の概要
作成日:2023-11-15
最終更新日:2023-11-15
1ヵ月あたりのビュー数:30
記事の文字数:2665
本記事のトピック
ボタンを押す演出でCSSのtranslateYやtopを使用することの問題
aリンクやinputボタンにボタンを押すような演出を追加したら、クリック時の反応が悪くなった気がした
aリンクやボタンの視認性を上げるために以下のようなボタンをCSSでデザインしました。 押してみるとボタンが沈み込みます。
sample

元のcssは以下ページを参考にしております。
https://web-dev.tech/front-end/css/3d-button/
いろんなページを見てみても大体同じような実装をしており、 「ボタンを押した瞬間」に要素を「下方向にわずかに動かす」ことでボタン感を出すようにしているようです。
なのですが、これを実装してPCで自分で色々操作してみると、なぜかボタンを押しても反応しないことがありました。
(上のボタンの元のCSSはこちらです。divタグで作ってますが、そこはあまり気にしないでください)
/* css */ div.local-button{ display: inline-block; padding: 0.8em 3em; background-color: #e3364a; /* 背景色 */ box-shadow: 0 5px 0 #ca1c30; /* 影の太さ・色 */ border-radius: 60px; color: #fff; cursor: pointer; text-decoration: none; } div.local-button:active{ box-shadow: none; transform: translateY(5px); }
原因はボタン要素を下に動かしていること
原因としては要素を押した瞬間に下に動かすことで、「マウスポインタがボタン要素から外れてしまうこと」のようでした。
下のボタンを押してみるとわかりやすいと思います。
sample

真ん中あたりを押すとアラートが表示されると思いますが、上部分ギリギリを押すと空振るはずです。
上部分ギリギリを押すと、クリックを外す(mouseup)ときにはボタンからマウスポインタが外れ反応しなくなっています。
これはinputタグでもaタグでも同様のことが起こります。
シンプルな対策は移動をやめる
対策としてはボタンを押した瞬間の移動をやめて、別の形でボタン演出をすることかと思います。
ボクが使ってるブラウザの標準ボタンのデザインだと以下のようにして押してる感を出してるようです。
・押した瞬間に要素自体の色を少し暗くする
・あらかじめボーダーを上と左は少し暗く、下と右は少し明るくしておき、押した瞬間にそれらの色を逆転させる
下のボタンは、こちらの2点目を使ってボタン感を出しています。

それでも移動させたいなら
それでも移動させたいなら、親要素を持たせてそこで要素の高さを保証させるのがシンプルな対応方法だと思います。
ただこの方法だと元のhtmlの構造まで変えないといけないので、ボクは嫌いですが……。
※以下、白い部分がクリック領域。
click!

分かりやすく親要素側は背景を白くしています。
元のCSSは以下です。spanをdivで囲う形で実装します。
/* css */ div.local-button2 { display: inline-block; height: 80px; background-color: white; border: 1px solid black; } div.local-button2 > span{ display: inline-block; padding: 0.8em 3em; background-color: #e3364a; box-shadow: 0 5px 0 #ca1c30; border-radius: 60px; color: #fff; cursor: pointer; text-decoration: none; } div.local-button2:active > span{ box-shadow: none; transform: translateY(5px); }
まとめ
ボクはデザインがユーザビリティを邪魔するのはダメだと思ってるので、 ボタン要素を動かそうとする今回の実装も嫌いですが、絶対ダメという実装でもないと思っています。
ちょっとくらい反応が悪くても意外とユーザは気にしないものなので。
特にスマホであれば正直今回のような問題もあまり起こらないと思うので、スマホのみを対象にするのであれば問題ない気がします(タブレットだとどうかな?)。
最終的には好みの問題と思いますが、もしボタン要素を動かすような実装にしたい場合はクリック判定が外れることがあることを頭の片隅に置いておくのがいいのかなと思います。
関連ページ
SCSSとやらでメディアクエリと疑似要素の組み合わせに小一時間苦戦したという話
SCSSとやらでメディアクエリと疑似要素の組み合わせに小一時間苦戦したという話 当然ですが本サイト…
Twitterの「興味関心」のチェックを全部まとめて外す
Twitterの「興味関心」のチェックを全部まとめて外せない Twitterに「興味関心」とやらを…
(現在ページ)ボタンを押す演出でCSSのtranslateYやtopを使用することの問題
ボタンを押す演出でCSSのtranslateYやtopを使用することの問題…
東京03のyoutubeチャンネルの概要ページの挙動がおかしい
東京03のyoutubeチャンネルの概要ページの挙動がおかしい…
Youtube Data APIでハンドルIDからユーザ情報を取得できない
Youtube Data APIでハンドルIDからユーザ情報を取得できない問題 結論から言うと現在…
ウマ娘まとめサイト(InoReader)
ウマ娘まとめサイト(InoReader)…
ウマ娘まとめサイト(Feedly)
ウマ娘まとめサイト(Feedly)…
Pythonを使ってinoreaderでサイトの更新情報を取得してみた
inoreader(イノリーダー?)が公開しているWeb APIを使用して、Pythonで自動的にサ…
Pythonを使ってFeedlyでサイトの更新情報を取得してみた
Pythonを使ってFeedlyでサイトの更新情報を取得してみた…
CPU-マルチプロセッサによる並列処理
CPU-マルチプロセッサによる並列処理…
CPUの高速化方式
CPUの高速化方式…
CPUの性能指標
CPUの性能指標…
CPU-アドレス指定方式
CPU-アドレス指定方式…
CPU命令実行の流れ
CPU命令実行の流れ…
文字コードについて
文字コードについて…
base64エンコードの流れ(C#)
base64エンコードの流れ(C#)…
サイバー攻撃:非標的型攻撃とは
サイバー攻撃:非標的型攻撃とは…
サイバー攻撃:標的型攻撃とは
サイバー攻撃:標的型攻撃とは…
IPアドレスについて
IPアドレスについて…
シングルサインオン/SAML認証について
シングルサインオン/SAML認証について…
コメントログ
コメント投稿




本サイトのタグ一覧
タグを表示する Webサイト作成Webツールアークナイツアークナイツ-ステージ攻略日記アズールレーンアズールレーン-日記ウマ娘ゲームデビラビローグホラーポケットタウン気ままな日記情報技術情報技術-WebAPI知的財産権統合戦略白夜極光本サイトについて魔王スライム様がんばる!漫画