個人ブログのようなものです。とくにジャンルはありません。
広告枠
Python[完全]入門
商品ページ
Amazon
本記事のトピック
  • aリンクやinputボタンにボタンを押すような演出を追加したら、クリック時の反応が悪くなった気がした
  • 原因はボタン要素を下に動かしていること
  • シンプルな対策は移動をやめる
  • それでも移動させたいなら
  • まとめ
記事の概要
作成日:2023-11-15
最終更新日:2023-11-15
記事の文字数:2665
情報技術Webサイト作成プログラミング
管理人作品宣伝
エンジニアが使う、7つの言葉。
動画 / 最終更新:2025-01-08
エンジニアが使う、独特なニュアンスを含む何気ない言い回しを7つ紹介しています。 ※こ…
YouTubeで閲覧するニコニコ動画で閲覧する
利用素材等の詳細情報
AIの考えた怖い話-Part01
動画 / 最終更新:2024-11-28
怪談系の怖い話を載せています。特に設定部分は人の手が入ってますが、なるべく生成AI(C…
YouTubeで閲覧するニコニコ動画で閲覧する
利用素材等の詳細情報
作品一覧はこちら
ボタンを押す演出で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); }
まとめ
ボクはデザインがユーザビリティを邪魔するのはダメだと思ってるので、 ボタン要素を動かそうとする今回の実装も嫌いですが、絶対ダメという実装でもないと思っています。
ちょっとくらい反応が悪くても意外とユーザは気にしないものなので。
特にスマホであれば正直今回のような問題もあまり起こらないと思うので、スマホのみを対象にするのであれば問題ない気がします(タブレットだとどうかな?)。
最終的には好みの問題と思いますが、もしボタン要素を動かすような実装にしたい場合はクリック判定が外れることがあることを頭の片隅に置いておくのがいいのかなと思います。
コメントログ
コメント投稿




広告枠
スッキリわかるJava入門 第3版 (スッキリわかる入門シリーズ)
商品ページ
Amazon
関連ページ
【プログラミング】実例で分かるかもしれない再帰処理
本ページは以下動画の台本を書き起こしたものです 解説の趣旨・方向性 皆さん、こんばんは今回はプログ…
SNSツイート一元化対応(Twitter・Misskey・Mastodon・Bluesky)-公開
概要 SNSツイートを一元化するためのツールを作成しています(古い記事ですが、こちらのページで紹介…
SNSツイート一元化対応(Twitter・Misskey・Mastodon・Bluesky)-Python
概要 概要 SNSのツイートを一元化する際の備忘録というかPythonコードの共有です。 それぞれ…
Windows-PowerShellを使用してのフォルダ内のファイル名を連番にリネームする
以下PowerShellコードを実行することで、フォルダ内のすべてのファイルのファイル名を「0001…
Youtubeで縦型画面で横型画面のゲームを投稿/配信してるときの対処法
Youtubeで縦型画面で横型画面のゲームを投稿/配信してるときの問題点 このページを見てる時点で…
SCSSとやらでメディアクエリと疑似要素の組み合わせに小一時間苦戦したという話
SCSSとやらでメディアクエリと疑似要素の組み合わせに小一時間苦戦したという話 当然ですが本サイト…
ボタンを押す演出でCSSのtranslateYやtopを使用することの問題
ボタンを押す演出でCSSのtranslateYやtopを使用することの問題…
東京03のyoutubeチャンネルの概要ページの挙動がおかしい
東京03のyoutubeチャンネルの概要ページの挙動がおかしい…
Youtube Data APIでハンドルIDからユーザ情報を取得できない
Youtube Data APIでハンドルIDからユーザ情報を取得できない問題 結論から言うと現在…
ウマ娘まとめサイト(InoReader)
ウマ娘まとめサイト(InoReader)…
管理人ツイート
本サイトのタグ一覧
NovelAIR18VRoidWebサイト作成Webツールアークナイツアークナイツ-ステージ攻略日記アズールレーンアズールレーン-日記ウマ娘ギャラリーゲームデビラビローグプログラミングホラーポケットタウン怪談気ままな日記情報技術情報技術-WebAPI知的財産権統合戦略白夜極光本サイトについて魔王スライム様がんばる!漫画
人気記事
メイド・オブ・ザ・デッド-攻略お助け情報
ネタバレ注意! 本ページは『メイド・オブ・ザ・デッド』の情報を記録しているものです。 攻略の参考に…
1142.9918 pt
剣と魔法と学園モノ。2G - パーティ編成確認ツール
ツール概要 ととモノ。2Gのパーティ編成を考える際に使うツールです。 あくまでストーリークリアまで…
288.0348 pt
アークナイツ-特訓アイテムの使用先考慮
アークナイツ-特訓アイテムの使用先について 概要と注意事項 この記事は1年以上前の実装状態での結果…
138.2727 pt
アークナイツ-5周年商品-理性換算
概要 "「5周年商品」および「新常設商品」でお得な商品はどれか"というのを理性に換算して一覧化した…
118.5679 pt
アークナイツ-「二次創作ガイドライン」と「ファンキット利用ガイドライン」の関連について
本記事の概要と注意点 本記事の趣旨・方向性 「アークナイツの二次創作ガイドライン」について、分から…
85.3333 pt
管理人について
「ふじみ むい」と言います ひょんなことから肉体を得たのでその肉体を使って活動をしています。 とい…
84.0122 pt
アークナイツ-昇進2率ランキング
アークナイツのTier表を作る際の備忘録です こちらのページで、昇進2率を基にTier表を作ろうと…
69.1277 pt
アークナイツ-4周年パック理性換算
概要 "4周年パックでお得な商品はどれか"というのを理性に換算して一覧化したものとなります。 絶対…
60.5000 pt
最新記事
メンバーシップについて
概要 他サイトのサービスでメンバーシップ登録が可能です。 メンバーシップ特典もありますが、基本的に…
本サイトについて
本サイトの概要 個人ブログのようなものです。とくにジャンルはありません。 本サイト内の情報について…
TRICK-本物っぽい霊能力者
概要 TRICKは基本的にインチキ霊能力者のインチキを暴いていく話ですが、中にはトリックでは説明が…
アークナイツ-特訓アイテムの使用先考慮
アークナイツ-特訓アイテムの使用先について 概要と注意事項 この記事は1年以上前の実装状態での結果…
広告枠