Magnetic Button with Elastic Feedback
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 rewrites this code based on your instructions. Preview is free; copy & download unlocked for ¥100.
AIとの対話に追加する一言
プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします
このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。
初心者なので、各行にコメントを追加して、何をしているか説明してください。
このコードをWordPressのテーマに組み込む方法も教えてください。
動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。
This interactive button combines magnetic hover effects with elastic click feedback to create a delightful microinteraction. The button attracts the cursor when it comes nearby, creating a playful magnetic pull effect. When clicked, it responds with a satisfying elastic bounce animation that provides clear feedback to the user.
The magnetic effect is calculated based on cursor proximity - the closer the cursor gets to the button, the stronger the attraction force. This creates a natural, physics-like interaction that feels intuitive and engaging.
The elastic click animation uses a custom cubic-bezier timing function to simulate real-world elasticity, making the button feel responsive and tactile. A subtle ripple effect enhances the visual feedback, while a click counter demonstrates practical application of the interaction.
This implementation uses pure JavaScript and CSS transforms for optimal performance, with hardware acceleration through translate3d for smooth animations. The design features a modern gradient background with appropriate shadows and transitions to create a polished, professional appearance.
Was this prompt helpful?
Comments
Comments appear after moderation
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / クレジットカード対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選