الصفحة الرئيسية
إضافات
افكار

كيفية تصميم أزرار مرنة باستخدام HTML و CSS

تصميم أزرار مرنة باستخدام HTML وCSS يجعلها جذابة وتفاعلية، ويمكن توسيطها أو استخدامها بدون توسيط حسب الحاجة. يمكن إضافة خاصية `Onclick`
جمال الحزازي
Split Post - Split Article Into Several Pages
كيفية تصميم أزرار مرنة باستخدام HTML و CSS

السلام عليكم ورحمة الله وبركات

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

تصميم الأزرار باستخدام CSS

في هذا المقال سأقدم لك مجموعة من الأنماط للأزرار مخصصة باستخدام CSS. ستضمن هذه الأنماط أن تكون الأزرار جذابة وتفاعلية عند التفاعل معها.

الشيفرة CSS

هذه الشيفرة CSS تبدو جيدة، وهي تحتوي على مجموعة من الأنماط التي تُطبق على أزرار عند التفاعل معها (عند تمرير المؤشر فوقها أو عند التركيز عليها). الشيفرة تعتمد على استخدام المتغيرات CSS لتحديد الألوان وتأثيرات التفاعل، مما يسهل عملية تعديل الأنماط لاحقًا.

<style type="text/css">  
  .fill:hover,.fill:focus{box-shadow:inset 0 0 0 2em var(--hover)}
  .close:hover,.close:focus{box-shadow:inset -3.5em 0 0 0 var(--hover),inset 3.5em 0 0 0 var(--hover)}
  .raise:hover,.raise:focus{color:#ffec48;box-shadow:0 0.5em 0.5em -0.4em var(--hover);transform:translateY(-0.25em)}
  .up:hover,.up:focus{box-shadow:inset 0 -3.25em 0 0 var(--hover)}
  .slide:hover,.slide:focus{box-shadow:inset 6.5em 0 0 0 var(--hover)}
  .offset{box-shadow:0.3em 0.3em 0 0 var(--color),inset 0.3em 0.3em 0 0 var(--color)}
  .offset:hover,.offset:focus{box-shadow:0 0 0 0 var(--hover),inset 6em 3.5em 0 0 var(--hover)}
  .fill{--color:#a972cb;--hover:#cb72aa}
  .close{--color:#ff7f82;--hover:#ffdc7f}
  .raise{--color:#ffa260;--hover:#ffec48}
  .up{--color:#e4cb58;--hover:#94e458}
  .slide{--color:#8fc866;--hover:#66c887}
  .offset{--color:#19bc8b;--hover:#1973bc}
  button{color:var(--color);transition:0.25s}
  button:hover,button:focus{border-color:var(--hover);color:#fff}
  button{background:none;border:2px solid;font:inherit;line-height:1;cursor:pointer;padding:1em 2em}
</style>

تركيب الكود على بلوجر

الخطوة 1 :- ✦ قم بتسجيل الدخول إلى لوحة التحكم بلوجر
الخطوة 2 :- ✦ انتقل إلى لوحة تحكم بلوجر واختر "المظهر".
الخطوة 3 :- ✦ انقر على السهم بجانب التخصيص اختر تعديل HTML
الخطوة 4 :- ✦ بعد ذلك، ابحث عن علامة </body> وألصق الكود (الموجود في صندوق الاكواد اعلاه) فوقها.
الخطوة 5 :- ✦ بمجرد لصق الكود، احفظ التغييرات بالنقر فوق هذا الرمز .

تنبيه مهم

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

  1. أخذ نسخة احتياطية:
    قبل تعديل أي شيء في قالب موقعك أو مدونتك، تأكد من أخذ نسخة احتياطية للقالب الحالي. يمكنك فعل ذلك عن طريق الانتقال إلى قسم القالب في لوحة التحكم واختيار خيار "نسخ القالب" أو "حفظ نسخة احتياطية"، أو يمكنك ببساطة نسخ الكود وحفظه في ملف نصي على جهاز الكمبيوتر الخاص بك.
  2. توثيق الشفرات:
    قبل إضافة أي شيفرة جديدة، قم بتوثيق الشفرة الحالية بشكل جيد. يمكنك ذلك عن طريق إنشاء تعليقات في الشفرة توضح وظيفة كل جزء منها وكيفية عمله. هذا يسهل علىك فهم الشفرة في المستقبل والتعديل عليها بشكل أفضل مثلا فتح و غلق التوثيق <!--[ open adds code]--> و <!--[ close adds code]-->.
  3. الاختبار الشامل:
    بعد إضافة الشفرات الجديدة، قم بإجراء اختبار شامل لموقعك أو مدونتك للتأكد من عمل الشفرات بشكل صحيح وعدم وجود أي مشاكل. قم بفحص صفحات متعددة من الموقع للتأكد من تأثير الشفرات على جميع الصفحات.
  4. التوثيق المستقبلي:
    بمجرد إضافة الشفرات بنجاح والتأكد من عملها بشكل صحيح، قم بتوثيقها في ملف مستقل يحتوي على جميع الشفرات المستخدمة في الموقع مع شرح وظيفة كل منها. هذا يساعدك في المراجعة المستقبلية وإجراء التعديلات عند الحاجة.

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

شرح مفصل

الأنماط والتأثيرات على الأزرار عند التفاعل (Hover, Focus)

  • .fill:hover, .fill:focus:
    - عند التفاعل مع العنصر ذو الفئة .fill، يتم إضافة box-shadow داخلي بسمك 2em ولون var(--hover).


    • .fill:hover, .fill:focus { box-shadow: inset 0 0 0 2em var(--hover); }
  • .close:hover, .close:focus:
    - عند التفاعل مع العنصر ذو الفئة .close، يتم إضافة box-shadow داخلي على الجانبين الأيمن والأيسر بسمك 3.5em ولون var(--hover).


    • .close:hover, .close:focus { box-shadow: inset -3.5em 0 0 0 var(--hover), inset 3.5em 0 0 0 var(--hover); }
  • .raise:hover, .raise:focus:
    - عند التفاعل مع العنصر ذو الفئة .raise، يتغير لون النص إلى #ffec48، ويتم إضافة box-shadow بارتفاع 0.5em ويبدو كأنه مظلل، بالإضافة إلى تأثير الحركة باستخدام transform لإنزاله قليلاً.


    • .raise:hover, .raise:focus { color: #ffec48; box-shadow: 0 0.5em 0.5em -0.4em var(--hover); transform: translateY(-0.25em); }
  • .up:hover, .up:focus: - عند التفاعل مع العنصر ذو الفئة .up, يتم إضافة box-shadow داخلي في الجزء السفلي بسمك 3.25em ولون var(--hover).
    • .up:hover, .up:focus { box-shadow: inset 0 -3.25em 0 0 var(--hover); }
  • .slide:hover, .slide:focus: - عند التفاعل مع العنصر ذو الفئة .slide, يتم إضافة box-shadow داخلي على الجانب الأيمن بسمك 6.5em ولون var(--hover).
    • .slide:hover, .slide:focus { box-shadow: inset 6.5em 0 0 0 var(--hover); }
  • .offset:
    - العنصر ذو الفئة .offset له تأثير box-shadow خارجي وداخلي بسمك 0.3em ولون var(--color).
    • .offset { box-shadow: 0.3em 0.3em 0 0 var(--color), inset 0.3em 0.3em 0 0 var(--color); }

  • .offset:hover, .offset:focus:
    - عند التفاعل مع العنصر ذو الفئة .offset, يتم إضافة box-shadow داخلي بسمك 6em على الجانب الأيمن و 3.5em من الأعلى ولون var(--hover).


    • .offset:hover, .offset:focus { box-shadow: 0 0 0 0 var(--hover), inset 6em 3.5em 0 0 var(--hover); }

تعريف الألوان الخاصة بكل فئة

.fill { --color: #a972cb; --hover: #cb72aa; } .close { --color: #ff7f82; --hover: #ffdc7f; } .raise { --color: #ffa260; --hover: #ffec48; } .up { --color: #e4cb58; --hover: #94e458; } .slide { --color: #8fc866; --hover: #66c887; } .offset { --color: #19bc8b; --hover: #1973bc; }

يتم تعريف الألوان الأساسية --color وألوان التفاعل --hover لكل فئة من الفئات .fill, .close, .raise, .up, .slide, و .offset.

الأنماط العامة للأزرار

button { color: var(--color); transition: 0.25s; } button:hover, button:focus { border-color: var(--hover); color: #fff; } button { background: none; border: 2px solid; font: inherit; line-height: 1; cursor: pointer; padding: 1em 2em; }

- الأنماط العامة للأزرار تشمل:

  1. - لون النص يكون بناءً على var(--color).
  2. - انتقال سلس لتأثيرات التفاعل لمدة 0.25 ثانية.
  3. - عند التفاعل، يتغير لون الحدود إلى var(--hover) ولون النص إلى الأبيض #fff.
  4. - الخلفية تكون شفافة (none).
  5. - الحدود بسمك 2 بكسل.
  6. - استخدام الخط الموروث من العنصر الأب (font: inherit).
  7. - ارتفاع السطر 1.
  8. - مؤشر الفأرة يتغير إلى pointer.
  9. - المساحة الداخلية (padding) تكون 1em عموديًا و 2em أفقيًا.

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

إليك بعض الملاحظات:

  1. استخدام المتغيرات:
    - استخدام المتغيرات --color و --hover يعطي مرونة في تغيير الألوان بسهولة في مكان واحد دون الحاجة لتكرار القيم في كل مكان.
  2. التأثيرات المتنوعة:
    - هناك مجموعة متنوعة من التأثيرات مثل fill, close, raise, up, slide, و offset. كل تأثير يستخدم box-shadow بطرق مختلفة لتحقيق تأثير بصري معين.
  3. انتقالات سلسة:
    - يتم استخدام transition لجعل التغييرات سلسة عند التفاعل مع الأزرار، مما يحسن من تجربة المستخدم.
  4. تحديد الأنماط للأزرار:
    - جميع الأزرار تستخدم نفس الأنماط الأساسية مثل background:none, border:2px solid, font:inherit, line-height:1, cursor:pointer, و padding:1em 2em. هذا يضمن تنسيقًا موحدًا لكل الأزرار مع إمكانية تخصيص التأثيرات عند التفاعل.

بشكل عام، الشيفرة نظيفة ومنظمة، وتوفر تأثيرات مرئية لطيفة تجعل الأزرار أكثر جاذبية وتفاعلية.

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

استخدام الأزرار في HTML

لمعاينة الازرارا معاينة حية و فهم الالية انقر على زر معاينة Unplug اسفله

معاينة في UnPlug

زر "Fill In"

<button class="fill" onclick="window.open('https://www.siwane.xyz/', '_blank')" target="blank" title="SiwaneXYZ">Fill In</button>
  1. ✦ الفئة: fill
  2. ✦ النمط: عند التفاعل (Hover أو Focus)، يتم ملء الزر بلون var(--hover) بشكل داخلي.
  3. ✦ لون الزر الأساسي: #a972cb
  4. ✦ لون التفاعل: #cb72aa
  5. ✦ النص: "Fill In"
  6. ✦ تأثير: عند التفاعل، يظهر تأثير box-shadow داخلي يعم الزر بلون --hover.

زر "Close"

<button class="close" onclick="window.open('https://www.siwane.xyz/', '_blank')" target="blank" title="SiwaneXYZ">Close</button>
  1. ✦ الفئة: close
  2. ✦ النمط: عند التفاعل، يتم ملء جانبي الزر بلون var(--hover).
  3. ✦ لون الزر الأساسي: #ff7f82
  4. ✦ لون التفاعل: #ffdc7f
  5. ✦ النص: "Close"
  6. ✦ تأثير: عند التفاعل، يظهر تأثير box-shadow على الجانبين الأيمن والأيسر بسمك 3.5em بلون --hover.

زر "Raise"

<button class="raise" onclick="window.open('https://www.siwane.xyz/', '_blank')" target="blank" title="SiwaneXYZ">Close</button>
  1. ✦ الفئة: raise
  2. ✦ النمط: عند التفاعل، يتم رفع الزر قليلاً وتغيير لون النص.
  3. ✦ لون الزر الأساسي: #ffa260
  4. ✦ لون التفاعل: #ffec48
  5. ✦ النص: "Raise"
  6. ✦ تأثير: عند التفاعل، يتغير لون النص إلى #ffec48، ويظهر تأثير box-shadow كأنه ظل مع رفع الزر قليلاً عن طريق transform.

زر "Fill Up"

<button class="up" onclick="window.open('https://www.siwane.xyz/', '_blank')" target="blank" title="SiwaneXYZ">Close</button>
  1. ✦ الفئة: up
  2. ✦ النمط: عند التفاعل، يتم ملء الزر من الأسفل بلون var(--hover).
  3. ✦ لون الزر الأساسي: #e4cb58
  4. ✦ لون التفاعل: #94e458
  5. ✦ النص: "Fill Up"
  6. ✦ تأثير: عند التفاعل، يظهر تأثير box-shadow داخلي من الأسفل بسمك 3.25em بلون --hover.

زر "Slide"

<button class="slide" onclick="window.open('https://www.siwane.xyz/', '_blank')" target="blank" title="SiwaneXYZ">Close</button>
  1. ✦ الفئة: slide
  2. ✦ النمط: عند التفاعل، يتم ملء الزر من اليسار إلى اليمين بلون var(--hover).
  3. ✦ لون الزر الأساسي: #8fc866
  4. ✦ لون التفاعل: #66c887
  5. ✦ النص: "Slide"
  6. ✦ تأثير: عند التفاعل، يظهر تأثير box-shadow داخلي من اليسار بسمك 6.5em بلون --hover.

زر "Offset"

<button class="offset" onclick="window.open('https://www.siwane.xyz/', '_blank')" target="blank" title="SiwaneXYZ">Close</button>
  1. ✦ الفئة: offset
  2. ✦ النمط: عند التفاعل، يتم تغيير تأثير الظل الداخلي والخارجي.
  3. ✦ لون الزر الأساسي: #19bc8b
  4. ✦ لون التفاعل: #1973bc
  5. ✦ النص: "Offset"
  6. ✦ تأثير: عند التفاعل، يتغير تأثير box-shadow الداخلي إلى عرض أكبر بسمك 6em على الجانب الأيمن و 3.5em من الأعلى بلون --hover.

التأثيرات العامة على الأزرار

جميع الأزرار تتبع الأنماط العامة لشيفرة CSS اعلاه:

  1. ✦ اللون الأساسي: اللون المحدد بـ var(--color) حسب الفئة.
  2. ✦ الانتقال: الانتقال السلس لمدة 0.25 ثانية.
  3. ✦ التفاعل: عند التفاعل، يتغير لون الحدود إلى var(--hover) ولون النص إلى الأبيض #fff.
  4. ✦ الخلفية: شفافة (none).
  5. ✦ الحدود: بسمك 2 بكسل.
  6. ✦ الخط: استخدام الخط الموروث من العنصر الأب (font: inherit).
  7. ✦ ارتفاع السطر: 1.
  8. ✦ مؤشر الفأرة: يتغير إلى pointer.
  9. ✦ المساحة الداخلية: 1em عموديًا و2em أفقيًا.

هذا التفسير يوفر فهمًا شاملًا لكيفية عمل الأزرار المختلفة وتأثيراتها عند التفاعل.

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

الشيفرة مع تخصيص onclick

لنأخذ زر "Fill In" كمثال:

شرح مفصل

زر "Fill In" مع onclick

<button class="fill" onclick="window.open('https://www.siwane.xyz/', '_blank')" target="blank" title="SiwaneXYZ">Fill In</button>
  1. ✦ الفئة: fill
  2. ✦ النص: "Fill In"
  3. ✦ تأثير CSS: عند التفاعل (Hover أو Focus)، يتم ملء الزر بلون var(--hover) بشكل داخلي.
  4. ✦ السلوك عند النقر: فتح موقع https://www.siwane.xyz/ في نافذة أو تبويب جديد.

كيفية إضافة onclick

  1. إضافة الخاصية onclick:
    ✦ نضيف الخاصية onclick داخل وسم <button>.
    ✦ الكود داخل onclick هو window.open('https://www.siwane.xyz/', '_blank').
    ✦ هذا الكود يقوم بفتح الرابط المحدد في نافذة أو تبويب جديد عند النقر على الزر.
  2. سبب إضافته:
    ✦ نستخدم onclick لإضافة وظيفة تفاعلية للزر.
    ✦ في هذا المثال، عند نقر المستخدم على الزر، يتم فتح موقع https://www.siwane.xyz/ في نافذة أو تبويب جديد.
    ✦ هذه الوظيفة مفيدة إذا كنا نرغب في توجيه المستخدمين إلى موقع معين عند نقرهم على الزر دون أن ينتقلوا من الصفحة الحالية.

مثال بسيط بدون onclick:

<center><button class="fill" title="SiwaneXYZ">Fill In</button></center>
  • ✦ في هذا المثال، الزر لن يقوم بأي فعل عند النقر عليه، وسيكون وظيفته مقتصرة على التفاعل البصري فقط (التأثيرات عند التفاعل Hover وFocus).

الخلاصة

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

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

الاستخدام المرن

بدون وسم التوسيط

  • ✦ إذا لم تكن هناك حاجة لتوسيط الزر، يمكنك ببساطة إدراج الزر في مكانه المطلوب:
<button class="fill" onclick="window.open('https://www.siwane.xyz/', '_blank')" title="SiwaneXYZ">Fill In</button>

مع وسم التوسيط

  • ✦ إذا كنت ترغب في توسيط الزر، يمكنك استخدام وسم التوسيط center:
<center>
    <button class="fill" onclick="window.open('https://www.siwane.xyz/', '_blank')" title="SiwaneXYZ">Fill In</button>
  </center>

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

الخلاصة

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

سؤال: كيف يمكنني تغيير لون الزر عند التحويم عليه؟

✦ جواب: يمكنك استخدام خاصيتي :hover و :focus في CSS لتغيير لون الزر عند التحويم عليه أو عند التركيز عليه. هذا يضيف تفاعلًا مرئيًا يجعل الزر يبدو أكثر تفاعلية.

سؤال: ما هي الطريقة المثلى لتوسيط زر في الصفحة؟

✦ جواب: الطريقة المثلى لتوسيط زر في الصفحة هي استخدام Flexbox في CSS، حيث يمكنك بسهولة توسيط الزر أفقيًا وعموديًا داخل عنصر حاوية.

سؤال: كيف يمكنني إضافة رابط لزر بحيث يفتح في نافذة جديدة؟

✦ جواب: يمكنك استخدام خاصية onclick مع الدالة window.open() في HTML. هذه الطريقة تتيح لك فتح الرابط في نافذة أو تبويب جديد عند النقر على الزر.

سؤال: هل من الأفضل استخدام وسم <center> لتوسيط العناصر؟

✦ جواب: لا يُنصح باستخدام وسم <center> لأنه قديم وغير مدعوم في HTML5. بدلاً من ذلك، يُفضل استخدام CSS لتوسيط العناصر، مثل استخدام Flexbox أو خصائص text-align في الحاويات.

خاتمة

باستخدام تقنيات HTML وCSS الحديثة، يمكنك تصميم أزرار مرنة وجذابة تلبي احتياجات التصميم المختلفة وتزيد من تفاعل المستخدمين. سواء كنت ترغب في توسيط الأزرار أو إبقائها دون توسيط، فإن استخدام أنماط CSS الديناميكية وخاصية onclick يتيح لك تحقيق ذلك بسهولة وفعالية. بهذه الطريقة، يمكنك تحسين تجربة المستخدم وتعزيز جاذبية موقعك الإلكتروني.

المشاركات ذات الصلة

شكرًا لمساعدة ChatGPT في إعداد هذا المقال

المصادر:
siwaneSiwaneXYZ©
https://www.siwane.xyz/2024/06/how-to-design-flexible-buttons-using.html

عن المؤلف

جمال الحزازي
مرحبا انا منشئ محتوى رقمي (صِوانˣʸᶻ) مهتم بالتصميم ui/ux، مدون في مجال التقنية و العلوم تعرف على المزيد.
اشتري لي كوب قهوة ☕

إرسال تعليق

اكتب تعليقك 🤗، لكن تيقن ان كلماتك تعبر عن من انت.
"لا يقال قف لاراك بل تكلم لأعرفك"