[sanyor77]

يمكنك استخدام JavaScript و CSS لإنشاء زر Button الذي يقوم بالتحرك عند تحريك الماوس عليه ويغير لون خلفية الصفحة. يمكنك استخدام الأحداث الماوس المتوفرة في JavaScript مثل onmousemove و onmouseout لتحريك الزر وتغيير لون خلفية الصفحة. فيما يلي مثال على كيفية القيام بذلك: HTML:

كود :

<button id="myButton" onmousemove="moveButton()" onmouseout="resetButton()">Button</button>

CSS:

كود :

body {
 background-color: #f2f2f2;
}

button {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 background-color: #4CAF50;
 color: white;
 padding: 12px 24px;
 border: none;
 cursor: default;
}

JavaScript

كود :

function moveButton() {
 var button = document.getElementById("myButton");
 var x = Math.floor(Math.random() * window.innerWidth);
 var y = Math.floor(Math.random() * window.innerHeight);
 button.style.left = x + "px";
 button.style.top = y + "px";
 document.body.style.backgroundColor = "#" + ((1<<24)*Math.random() | 0).toString(16); // تغيير لون خلفية الصفحة بشكل عشوائي
}

function resetButton() {
 var button = document.getElementById("myButton");
 button.style.left = "50%";
 button.style.top = "50%";
 document.body.style.backgroundColor = "#f2f2f2"; // إعادة لون خلفية الصفحة إلى الأصلي
}

تأكد من تضمين الكود السابق داخل علامات <script> في صفحة HTML الخاصة بك. يمكنك تعديل الأسلوب الذي يتم به تحريك الزر وتغيير لون خلفية الصفحة لتناسب احتياجاتك الخاصة.