تحريك Button عند وضع المؤشر عليه باستخدام CSS

يمكنك استخدام الخصائص التالية في CSS لتحقيق ذلك:

1. padding-left: لتحريك الزر إلى اليسار.
2. transition: لإضافة تحول سلس عندما يتم تحريك الزر.
3. :hover: لتنفيذ التغييرات اللازمة عندما يتم تمرير المؤشر فوق الزر.

وهناك العديد من الطرق المختلفة لتحقيق هذا التأثير ، ولكن إليك مثال بسيط لكيفية القيام بذلك:

HTML:

<button class="my-button">Submit</button>

CSS:

.my-button {
  padding-left: 0; /* تحريك الزر إلى اليسار */
  transition: all 0.3s ease; /* إضافة تحول سلس عند تحريك الزر */
}

.my-button:hover {
  padding-left: -10px; /* تحريك الزر إلى اليسار بشكل أكبر عندما يتم تمرير المؤشر فوقه */
}

تستطيع تغيير قيم ال padding-left لتتناسب مع تصميمك، وكذلك الاستفادة من خصائص أخرى في CSS لتحقيق التأثير المطلوب، كالتالي:

1- margin-left: بدلاً من استخدام padding-left يمكن استخدام margin-left لتحريك الزر إلى اليسار.

.my-button {
  margin-left: 0;
  transition: all 0.3s ease;
}

.my-button:hover {
  margin-left: -10px;
}

2- transform: يمكن استخدام خاصية transform مع translateX لتحريك العنصر إلى اليسار.

.my-button {
  transform: translateX(0);
  transition: all 0.3s ease;
}

.my-button:hover {
  transform: translateX(-10px);
}

3- left و position: يمكن استخدام خاصيتي left و position لتحريك العنصر في مكانه.

.my-button {
  position: relative;
  left: 0;
  transition: all 0.3s ease;
}

.my-button:hover {
  left: -10px;
}

يمكنك فعل ذلك بإضافة transform إلى للعنصر عند حدوث الـ hover وهذا مثال على العملية :

<input type="button" value="submit">
<style>
	input[type="button"] {
		transition: 0.4s;
	}

	input[type="button"]:hover {
		transform: translateX(-5px);
	}
</style>

يمكنك ايضا استخدام جافاسكربت لتحقيق ذات الغرض، يعرف العنصر بالمحدد input[type="button"] كل عنصر input من النوع button. 

لنضف التفاعلية:

// تحديد كامل الازرار
var buttons = document.querySelectorAll('input[type="button"]');

buttons.forEach(button => {
   // ضبط الهامش الجانبي ب 10 بكسل عند عمل هوفر
   button.addEventListener('mouseover', function() {
     button.style.marginLeft = '10px';
   });

   // ضبط الهامش الجانبي ب 0 بكسل عند ترك الهوفر
   button.addEventListener('mouseout', function() {
      button.style.marginLeft = '0px';
   });
})

لتحريك زر input type عند عمل hover، يمكن استخدام CSS Transitions أو CSS Animations. في هذا المثال، سنستخدم CSS Transitions.

نبدأ بكتابة HTML الخاص بالزر:

HTML

<input class="move-left" />

ثم نستخدم CSS لتعريف نمط الزر وتحريكه. يجب استخدام position: relative للعنصر الأب و position: absolute للزر لكي يمكن تحويله نحو اليسار.

CSS

.move-left {
  background-color: #3498db; /* لون الخلفية */
  color: #fff; /* لون النص */
  border: none; /* حدود الزر */
  padding: 10px 16px; /* الهامش داخلي */
  font-size: 18px; /* حجم النص */
  cursor: pointer; /* تغيير شكل المؤشر */
  position: absolute; /* تحديد موقع الزر بشكل مطلق */
  transition: all 0.3s ease-in-out; /* تفاصيل التحرك */
}

.move-left:hover {
  left: -5px; /* تحريك الزر نحو اليسار عند hover */
}

تم تعيين خاصية transition للتحكم في تفاصيل التحرك. هذه الخاصية تمكنك من تحديد الوقت الذي يستمر فيه التحرك ونوع التسارع.

يمكن تغيير قيمة left و top لتحريك الزر على المحور المناسب، مثل left: 10px; لتحريكه نحو اليمين.

وهذا مثال آخر.

HTML

<input class="move-left-2"/>

CSS

.move-left-2 {
  background-color: #3498db; /* لون الخلفية */
  color: #fff; /* لون النص */
  border: none; /* حدود الزر */
  padding: 10px 16px; /* الهامش داخلي */
  font-size: 18px; /* حجم النص */
  cursor: pointer; /* تغيير شكل المؤشر */
  position: relative; /* تحديد موقع الزر بصورة نسبية */
}

.move-left-2:hover {
  transform: translateX(-5px); /* تحريك الزر نحو اليسار عند hover */
}

في هذا المثال، تم استخدام transform مع translateX لتحريك الزر.

يمكن تعديل الأرقام لتحريك الزر على المسافة التي ترغب بها.

__________

بأختصار, لتحريك `input` نحو اليسار عند عمل `hover` عليه، يمكن استخدام خاصية `padding-left` في CSS مع تحويل قيمتها إلى عدد سلبي عند حدوث الحدث `hover` مع باقي الاستايلات التي تريدها. ويمكن عودة ال `input` إلى مكانه الأصلي باستخدام نفس الطريقة باستثناء إعادة تعين `padding-left` الى القيمة الأصلية.

ويمكنك فعل ذلك باستخدام JavaScript أنظر هذا المثال.

هذا هو الكود في :

HTML

<input type="text" id="myInput" value="Hello World!">

CSS
 

#myInput {
  padding-left: 10px;
  transition: padding-left 0.5s ease;
}

JavaScript
 

var myInput = document.getElementById("myInput");
myInput.addEventListener("mouseover", function( event ) {
  myInput.style.paddingLeft = "10px";
}, false);

myInput.addEventListener("mouseout", function( event ) {
  myInput.style.paddingLeft = "0px";
}, false);

في هذا المثال، عندما يحدث حدث `mouseover` يتم تعيين `-10px` في الخاصية`padding-left`. وعند حدوث حدث `mouseout`، يتم استعادة `padding-left` لقيمته الأصلية.

يمكنك تغيير القيم المستخدمة في الأكواد `<input>` و `<style>` و `JavaScript` وفقًا لما تريد.

وهذه بعض المقالات المفيدة في هذا الموضوع.

بتاريخ 3 ساعة قال اسامة الضناوي:

اريده ان يبعد مسافة صغيرة نحو اليسار عند عمل hover ثم يعود مكانه .

هل تقصد أنه تريد العنصر أن يذهب لليسار ويعود لمكانه عند الحدث hover أما تريد أن يذهب لليسار وبعد ال hover يرجع مكانه ؟

إذا كنت تقصد الحالة الأولى فيمكنك استخدام ال animation كما بالشكل التالي

HTML:

<input type="button" value="Submit">

CSS:

input[type=button] {
  position: relative;
  transition: transform 0.3s ease-in-out;
}

input[type=button]:hover {
  animation-name: move-left;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}

@keyframes move-left {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-5px);
  }
  100% {
    transform: translateX(0);
  }
}

في هذا المثال، تم استخدام transition لتحريك الزر بشكل سلس عند ال hover، ويتم تطبيق الحركة بواسطة animation باستخدام @keyframes. تم تحريك الزر بمقدار 5 بكسل إلى اليسار في نصف الوقت باستخدام الخاصية transform: translateX(-5px).

ثم تم استخدام animation في الزر، حيث تم تعيين مدة الحركة animation-duration إلى 0.3 ثانية وتم تعيين اسم الحركة animation-name إلى move-left، وهو اسم الـ @keyframes الذي تم تحديده سابقًا. تم استخدام animation-fill-mode لجعل الزر يبقى في مكانه بعد انتهاء الحركة.

باستخدام animation ، يمكن تنفيذ المطلوب بشكل سلس ومرن، ويمكن تعديل سرعة ومدة الحركة والتأثيرات التي يتم استخدامها.