Magnetic Hover & Elastic Click Button: AI Prompt Example
Prompt
Create a button with magnetic hover effect and elastic click feedback using CSS transforms and JavaScript. The button should attract the cursor when nearby and bounce back with elastic animation when clicked.
CODE PREVIEW
AIとの対話に追加する一言
プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします
このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。
初心者なので、各行にコメントを追加して、何をしているか説明してください。
このコードをWordPressのテーマに組み込む方法も教えてください。
動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。
このインタラクティブボタンは、磁力ホバー効果と弾性クリックフィードバックを組み合わせ、楽しいマイクロインタラクションを実現しています。カーソルが近づくとボタンが引き寄せられ、遊び心のある磁力効果を生み出します。クリック時には、満足感のある弾性バウンスアニメーションでユーザーに明確なフィードバックを提供します。
磁力効果はカーソルの近接度に基づいて計算されます。カーソルがボタンに近づくほど引力が強くなり、直感的で魅力的な物理的なインタラクションを実現します。
弾性クリックアニメーションは、カスタムのcubic-bezierタイミング関数を使用して現実世界の弾性をシミュレートし、ボタンの応答性と触覚的な感触を高めています。微細な波紋効果が視覚的フィードバックを強化し、クリックカウンターはインタラクションの実用的な応用例を示しています。
この実装は最適なパフォーマンスのために純粋なJavaScriptとCSS transformを使用し、translate3dによるハードウェアアクセラレーションでスムーズなアニメーションを実現しています。デザインはモダンなグラデーションバックグラウンドと適切なシャドウ、トランジションを特徴とし、洗練されたプロフェッショナルな外観を作り出しています。
Prompt Overview
This prompt demonstrates how to build an interactive button with two distinct behaviors: a magnetic attraction effect that pulls the cursor toward the button as it approaches, and an elastic bounce-back animation triggered on click. It combines CSS transforms for smooth visual transitions with JavaScript event listeners that calculate cursor proximity in real time, making it a great learning reference for developers exploring physics-inspired UI micro-interactions.
This kind of prompt is ideal for front-end developers, UI designers, and creative coders who want to add tactile, playful feedback to web interfaces — such as call-to-action buttons, portfolio sites, or product landing pages. To reproduce it, paste the prompt into a capable code-generation model like GPT-4o or Claude, then refine the magnetic pull radius and spring tension values to match your design system. Variations worth trying include applying the same effect to navigation icons, card elements, or floating action buttons.
Was this prompt helpful?
Comments
Comments appear after moderation
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選