الوسم button الأزرار العادية في HTML

الوسم button الأزرار

هو وسم إنشاء زر للضغط عليه و يكون بداخل الزر أوامر مثل ( رابط يؤدي لصفحة ما, ارسال بيانات يتم ملؤها و ارسالها لسيرفر, تشغيل امر ما....الخ.

الوسم (Tag) المستخدم لإنشاء زر (Button) هو الوسم <button> ويتم استخدام الوسم <button> لإنشاء زر قابل للنقر يمكن استخدامه لتنفيذ إجراء معين عند النقر عليه.

يكتب بالشكل

<button>هنا نكتب ما يظهر على الزر</button>
.

يمكنك أيضًا إضافة سمة (Attribute) إلى وسم الزر لتحديد سمات إضافية مثل الأحداث (Events) أو الأنماط (Styles) أو الصور (Images) المرتبطة بالزر. على سبيل المثال:

<button id="myButton" onclick="myFunction()">نص الزر</button>
.

في هذا المثال، تم إضافة سمة id للزر وسمة onclick لتحديد الدالة التي ستُستدعى عند النقر على الزر.

هذا مجرد مثال بسيط لاستخدام الوسم <button> في HTML. يمكنك تخصيص الزر بشكل أكبر باستخدام CSS و JavaScript لتحقيق المظهر والسلوك المطلوب.

مثال

<body>
         <button type="button"> انقر لتسجيل الدخول</button>
</body>

انشأنا زر نوع button و محتوى الزر كتبناه انقر لتسجيل الدخول, و عندما شغلنا الكود على المتصفح ظهر لنا الزر بالشكل.

مثال

قم بإنشاء حقل ايميل و حقل باسورد مع زر button من نوع submit و ارسال البيانات إلى السيرفر و حقل reset مسح البيانات من الحقول.

<body>
    <form>
         Email : <input type="text" name="email"><br><br>
         Password : <input type="password" name="pass"><br>
          <button type="reset">reset</button>
          <button type="submit">login</button>
    </form>
</body>

انشانا حقول ادخال للايميل و الباسورد و قمنا بإضافة زر ادخال و زر حذف للبيانات, و عندما نقوم بتشغيل الكود في المتصفح سيكون شكله.

تغيير لون الزر باستخدام CSS الوسم button الأزرار العادية في HTML

نعم، يمكنك تغيير لون الزر باستخدام CSS. يمكنك استهداف الوسم <button> وتعيين الخاصية background-color لتغيير لون الخلفية للزر.

فيما يلي مثال يوضح كيفية تغيير لون الزر باستخدام CSS:

<style>
  button {
    background-color: blue;
    color: white;
  }
</style>

<button>نص الزر</button>

في هذا المثال، تم تعيين اللون الأزرق كلون خلفية للزر باستخدام الخاصية background-color، وتم تعيين لون النص إلى الأبيض باستخدام الخاصية color.

يمكنك تعديل القيم المستخدمة في background-color و color حسب الألوان التي ترغب في استخدامها.

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

إضافة صورة إلى الزر الوسم button الأزرار العادية في HTML

نعم، يمكنك إضافة صورة إلى زر HTML باستخدام CSS. يمكنك استخدام خاصية background-image لتعيين صورة كخلفية للزر.

فيما يلي مثال يوضح كيفية إضافة صورة إلى زر HTML باستخدام CSS:

<style>
  button {
    background-image: url("path/to/image.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    color: white;
    padding: 10px 20px;
  }
</style>

<button>نص الزر</button>

في هذا المثال، تم استخدام خاصية background-image لتعيين صورة باستخدام مسار الصورة "path/to/image.jpg".

يتم تعيين خاصية background-size إلى "cover" لضمان تغطية خلفية الزر بالكامل بالصورة.

تم تعيين خاصية background-repeat إلى "no-repeat" لمنع تكرار الصورة في الخلفية.

يمكنك تعديل قيمة padding وأي خصائص أخرى وفقًا للاحتياجات الخاصة بك لضبط حجم وتخطيط الزر بشكل مناسب.

يجب عليك استبدال "path/to/image.jpg" بمسار الصورة الفعلي على الخادم الذي تستخدمه.

تغيير حجم الزر أيضا باستخدام CSS الوسم button الأزرار العادية في HTML

نعم، يمكنك تغيير حجم الزر باستخدام CSS عن طريق تعيين خاصية width و height للوسم <button>.

فيما يلي مثال يوضح كيفية تغيير حجم الزر باستخدام CSS :

<style>
  button {
    width: 200px;
    height: 50px;
  }
</style>

<button>نص الزر</button>

في هذا المثال، تم تعيين خاصية width إلى 200 بكسل وخاصية height إلى 50 بكسل. يمكنك تعديل هذه القيم وفقًا للحجم الذي ترغب فيه للزر.

بالإضافة إلى ذلك، يمكنك استخدام وحدات أخرى مثل النسب المئوية (٪) أو الـ "em" أو الـ "rem" لتعيين حجم الزر بشكل مرن ومستجيب.

<style>
  button {
    width: 50%;
    height: 3em;
  }
</style>

<button>نص الزر</button>

في هذا المثال، تم تعيين خاصية width إلى 50٪ من عرض العنصر الأصلي وتم تعيين خاصية height إلى ثلاثة أضعاف حجم الخط الأصلي. هذا يسمح بتعديل حجم الزر بناءً على حجم الشاشة أو العنصر الأصلي المحتوي عليه الزر.

يمكنك تجربة مختلف القيم والوحدات وفقًا لاحتياجاتك للحصول على التصميم المناسب للزر.

تغيير لون النص داخل الزر باستخدام CSS الوسم button الأزرار العادية في HTML

يمكنك تغيير لون النص داخل الزر باستخدام CSS. يمكنك استهداف الوسم <button> وتعيين خاصية color لتغيير لون النص.

فيما يلي مثال يوضح كيفية تغيير لون النص داخل الزر باستخدام CSS:

<style>
  button {
    color: red;
  }
</style>

<button>نص الزر</button>

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

يمكنك أيضًا استخدام قيم أخرى مثل الأكواد اللونية (مثل #FF0000 للأحمر) أو اسماء الألوان (مثل blue للأزرق) لتعيين اللون المناسب للنص. يمكنك تجربة مختلف الألوان واختيار ما يناسب تصميم الصفحة الخاص بك.

تغيير شكل الزر باستخدام CSS الوسم button الأزرار العادية في HTML

نعم، يمكنك تغيير شكل الزر باستخدام CSS باستخدام خاصية border-radius وغيرها من الخصائص المتعلقة بالحواف والظلال.

فيما يلي بعض الخصائص التي يمكنك استخدامها لتغيير شكل الزر:

border-radius: تستخدم لتحديد شكل حواف الزر. يمكنك تعيين قيمة بكسل (مثل border-radius: 5px) أو النسبة المئوية (مثل border-radius: 50%) للحصول على حواف مستديرة.
box-shadow: تستخدم لإضافة ظل للزر وبذلك يمكنك إعطاء الزر مظهر ثلاثي الأبعاد. يمكنك تعيين قيم للظلال الأفقية والعمودية والانتشار ولون الظل.
text-shadow: تستخدم لإضافة ظل للنص داخل الزر. يمكنك تعيين قيم للظلال الأفقية والعمودية ولون الظل.
background-color: تستخدم لتعيين لون خلفية الزر.
border: تستخدم لتحديد خاصيات الحدود للزر، مثل سمك الحدود ونوعها ولونها.
padding: تستخدم لتحديد التباعد الداخلي للزر، وبذلك يمكنك تغيير حجم الزر وشكله.

يمكنك استخدام مجموعة متنوعة من هذه الخصائص وتعديل القيم وفقًا للتصميم الذي ترغب في تحقيقه للزر. يمكنك تجربة مختلف القيم والتحكم في الأشكال والأنماط للحصول على المظهر المناسب للزر.

استخدام أكثر من خاصية CSS في نفس الزر الوسم button الأزرار العادية في HTML

يمكن استخدام أكثر من خاصية CSS في نفس الزر لتعديل مظهره. يمكنك تضمين العديد من الخصائص داخل القوسين الزوايا {} للوسم <style>.

فيما يلي مثال يوضح كيفية استخدام عدة خصائص CSS في نفس الزر:

<style>
  button {
    width: 200px;
    height: 50px;
    background-color: blue;
    color: white;
    border: none;
    border-radius: 10px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    padding: 10px;
  }
</style>

<button>نص الزر</button>

في هذا المثال، تم استخدام العديد من الخصائص CSS لتعديل مظهر الزر. تم تعيين العديد من الخصائص مثل width و height و background-color و color و border و border-radius و box-shadow و text-shadow و padding لتعديل مظهر الزر بشكل شامل.

يمكنك إضافة وتعديل الخصائص حسب احتياجاتك وتفضيلات التصميم الخاصة بك. يمكنك تجربة مختلف القيم والتحكم في الأشكال والأنماط للحصول على المظهر المناسب للزر.

نسور التقنية Nusur Tech

الوسم button الأزرار العادية في HTML