✨ زر تفاعلي بلمعة تتبع حركة الماوس — تصميم احترافي ومتجاوب

في تصميم واجهات المستخدم الحديثة، أصبحت الأزرار التفاعلية جزءًا أساسيًا من جذب انتباه الزائر وتحسين تجربة المستخدم.
في هذا المقال، سنتعلم كيفية إنشاء زر متوهج ديناميكي يتفاعل مع حركة الماوس، مما يضيف لمسة احترافية لأي صفحة ويب أو مدونة.

هذا التصميم يعتمد فقط على HTML وCSS وJavaScript خفيفة، بدون أي مكتبات خارجية، مما يجعله سريع التحميل ومتوافق مع جميع المتصفحات.

ما يميز هذا الزر

1. تأثير لمعة ديناميكية
   يظهر ضوء متحرك على الزر يتتبع مؤشر الماوس مباشرة.
   يعطي إحساسًا بأن الزر “حي” ويتفاعل مع المستخدم.

2. ألوان متغيرة مع الحركة
   تعتمد الألوان على موقع الماوس بالنسبة للزر، ما يجعل التصميم أكثر حيوية وجاذبية.

3. متجاوب بالكامل (Responsive)
   يعمل على جميع الشاشات — الموبايل، التابلت، والكمبيوتر.

4. خفيف وسريع
   يعتمد فقط على HTML وCSS وJS صغير الحجم، لا يحتاج أي مكتبات إضافية.

5. سهل التخصيص
   يمكنك تغيير الألوان، حجم الزر، شكل الحدود، أو إضافة تأثيرات إضافية عند الـ Hover بسهولة.

الهيكل الأساسي للزر

HTML

<button> <span>Button</span> </button> <button> <span>Allito</span> </button> <button> <span>App</span> </button> نسخ الكود

CSS

:root { --x: 0; --y: 0; --xp: 0; --yp: 0; --hue: calc(0 + (var(--xp) * 500)); --bg: hsl(0 0% 10%); --size: 100px; --glow: radial-gradient(50% 50% at center, hsl(var(--hue) 80% 85%), hsl(var(--hue) 80% 70%), transparent) calc((var(--x) * 1px) - (var(--size) * 0.5)) calc((var(--y) * 1px) - (var(--size) * 0.5)) / var(--size) no-repeat fixed; } .contrels { position: fixed; top: 2rem; right: 2rem; } body{ font-family: "SF Pro Text"; background: var(--bg); display: flex; justify-content: center; align-items: center; height: 100vh; } button { border-radius: 1rem; text-transform: uppercase; font-weight: bold; letter-spacing: 0.1ch; background: var(--bg); border: 4px solid transparent; box-shadow: 0 1px hsl(0 0% 100% / 0.15) inset; cursor: pointer; background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--glow), linear-gradient(black, black) border-box; transition: background-size 0.24s; touch-action: none; position: relative; padding: 1rem 2rem; } button::before { content: ""; position: absolute; inset: 0; box-shadow: 0 1px hsl(0 0% 100% / 0.15) inset; background: var(--bg); z-index: 2; border-radius: 1rem; } button span { background: var(--glow), black; background-clip: text; color: transparent; height: 100%; width: 100%; z-index: 2; position: relative; inset: 0; } :root:has(button:active) { --size: 300px; } button::after { content: ""; position: absolute; inset: -4px; filter: blur(20px); border: 4px solid transparent; background: var(--glow); border-radius: 1rem; } نسخ الكود

JS

const syncPointer = ({ x: pointerX, y: pointerY }) => { const x = pointerX.toFixed(2) const y = pointerY.toFixed(2) const xp = (pointerX / window.innerWidth).toFixed(2) const yp = (pointerY / window.innerHeight).toFixed(2) document.documentElement.style.setProperty('--x', x) document.documentElement.style.setProperty('--xp', xp) document.documentElement.style.setProperty('--y', y) document.documentElement.style.setProperty('--yp', yp) } document.body.addEventListener('pointermove', syncPointer) نسخ الكود