تصميم أزرار تفاعلية دليل عملي لتحسين واجهة موقعك

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

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

الهيكل العام للكود:

• HTML: يحتوي الكود على سبعة أزرار (button-1 إلى button-7)، كل زر له تصميم وتأثيرات مختلفة.
• CSS: يتم تعريف الأنماط والتأثيرات لكل زر باستخدام CSS، مع استخدام خصائص مثل transition و transform لإنشاء تأثيرات سلسة.

الأنواع المختلفة للأزرار وتأثيراتها:

كل زر له تأثير تفاعلي مختلف عند تحريك المؤشر فوقه (hover):

• الزر الأول (button-1):
  • يحتوي على رمز سهم يظهر عند التحريك.
  • التأثير: يتحرك السهم إلى اليمين ويظهر بشكل تدريجي.
• الزر الثاني (button-2):
  • يحتوي على شريط يتحرك من اليسار إلى اليمين عند التحريك.
  • التأثير: يملأ الشريط الخلفية ويتغير لون النص.
• الزر الثالث (button-3):
  • يحتوي على دائرة تتوسع من المركز عند التحريك.
  • التأثير: تملأ الدائرة الخلفية ويتغير لون النص.
• الزر الرابع (button-4):
  • يحتوي على خط يتوسع من اليسار إلى اليمين عند التحريك.
  • التأثير: يظهر الخط أسفل النص.
• الزر الخامس (button-5):
  • يحتوي على شكل مائل يتحرك من اليسار إلى اليمين عند التحريك.
  • التأثير: يملأ الشكل الخلفية ويتغير لون النص.
• الزر السادس (button-6):
  • يحتوي على شكل دائري يدور ويتوسع عند التحريك.
  • التأثير: يملأ الشكل الخلفية ويتغير لون النص.
• الزر السابع (button-7):
  • يحتوي على سهم مزدوج يظهر عند التحريك.
  • التأثير: يتحرك النص إلى اليمين ويظهر السهم.

التفاصيل الفنية:

• الزر (<a>):
  • يتم استخدام <a> لإنشاء الأزرار، حيث يمكن النقر عليها للانتقال إلى رابط معين.
  • يتم تنسيق الأزرار باستخدام border-radius لجعل الزوايا مستديرة، و transition لإضافة تأثيرات سلسة.
• الرمز (<img>):
  • يتم استخدام صور من مكتبة Font Awesome أو روابط خارجية لإضافة رموز مثل السهم.
• التأثيرات (hover):
  • يتم استخدام :hover في CSS لتطبيق تأثيرات عند تحريك المؤشر فوق الزر.
  • يتم استخدام transform و transition لإنشاء حركات وتأثيرات سلسة.

فوائد وأهمية الكود:

• تحسين تجربة المستخدم: التأثيرات التفاعلية تجعل الأزرار أكثر جاذبية وتشجع المستخدمين على التفاعل معها.
• التخصيص: يمكن تعديل الألوان والأحجام والتأثيرات بسهولة لتناسب تصميم الموقع.
• التوافق: الكود يعمل على جميع المتصفحات الحديثة بفضل استخدام CSS3 و HTML5.
• سهولة الاستخدام: يمكن إضافة هذه الأزرار إلى أي موقع ويب بسهولة.

شرح الكود بالتفصيل:

الجزء الأول (HTML):

<a id="button-1" class="button" href="https://wiisam21.blogspot.com/">تحميل<img id="arrow-hover" src="https://github.com/atloomer/atloomer.github.io/blob/master/img/iconmonstr-paper-plane-1-120.png?raw=true"/></a>

<a id="button-1" class="button" href="https://wiisam21.blogspot.com/">
  تحميل
  <i class="fas fa-arrow-right"></i>
</a>

<div class="button" id="button-2">
  <div id="slide"></div>
  <a href="https://wiisam21.blogspot.com/">تحميل</a>
</div>

<div class="button" id="button-3">
  <div id="circle"></div>
  <a href="https://wiisam21.blogspot.com/">تحميل</a>
</div>

<div class="button" id="button-4">
  <div id="underline"></div>
  <a href="https://wiisam21.blogspot.com/">تحميل</a>
</div>

<div class="button" id="button-5">
  <div id="translate"></div>
  <a href="https://wiisam21.blogspot.com/">تحميل</a>
</div>

<div class="button" id="button-6">
  <div id="spin"></div>
  <a href="https://wiisam21.blogspot.com/">تحميل</a>
</div>

<div class="button" id="button-7">
  <div id="dub-arrow">
    <i class="fas fa-arrows-alt-h"></i>
  </div>
  <a href="https://wiisam21.blogspot.com/">تحميل</a>
</div>
    

يتم إنشاء زر مع نص (تحميل) ورمز (<img>).

يتم استخدام id لتحديد الزر وتطبيق التأثيرات المخصصة.

الجزء الثاني (CSS):

@import url('https://fonts.googleapis.com/css?family=Raleway:300,400');.button{display:inline-flex;height:40px;width:150px;border:2px solid #bfc0c0;margin:20px 20px 20px 20px;color:#bfc0c0;text-transform:uppercase;text-decoration:none;font-size:.8em;letter-spacing:1.5px;align-items:center;justify-content:center;overflow:hidden}a{color:#bfc0c0;text-decoration:none;letter-spacing:1px}#arrow-hover{width:15px;height:10px;position:absolute;transform:translateX(60px);opacity:0;-webkit-transition:all .25s cubic-bezier(.14,.59,1,1.01);transition:all .15s cubic-bezier(.14,.59,1,1.01);margin:0;padding:0 5px}a#button-1:hover img{width:15px;opacity:1;transform:translateX(50px)}#button-2{position:relative;overflow:hidden;cursor:pointer}#button-2 a{position:relative;transition:all .35s ease-Out}#slide{width:100%;height:100%;left:-200px;background:#bfc0c0;position:absolute;transition:all .35s ease-Out;bottom:0}#button-2:hover #slide{left:0}#button-2:hover a{color:#2d3142}#button-3{position:relative;overflow:hidden;cursor:pointer}#button-3 a{position:relative;transition:all .45s ease-Out}#circle{width:0;height:0;opacity:0;line-height:40px;border-radius:50%;background:#bfc0c0;position:absolute;transition:all .5s ease-Out;top:20px;left:70px}#button-3:hover #circle{width:200%;height:500%;opacity:1;top:-70px;left:-70px}#button-3:hover a{color:#2d3142}#button-4{position:relative;overflow:hidden;cursor:pointer}#button-4 a{position:relative;transition:all .45s ease-Out}#underline{width:100%;height:2.5px;margin-top:15px;align-self:flex-end;left:-200px;background:#bfc0c0;position:absolute;transition:all .3s ease-Out;bottom:0}#button-4:hover #underline{left:0}#button-5{position:relative;overflow:hidden;cursor:pointer}#button-5 a{position:relative;transition:all .45s ease-Out}#translate{transform:rotate(50deg);width:100%;height:250%;left:-200px;top:-30px;background:#bfc0c0;position:absolute;transition:all .3s ease-Out}#button-5:hover #translate{left:0}#button-5:hover a{color:#2d3142}#button-6{position:relative;overflow:hidden;cursor:pointer}#button-6 a{position:relative;transition:all .45s ease-Out}#spin{width:0;height:0;opacity:0;left:70px;top:20px;transform:rotate(0deg);background:0;position:absolute;transition:all .5s ease-Out}#button-6:hover #spin{width:200%;height:500%;opacity:1;left:-70px;top:-70px;background:#bfc0c0;transform:rotate(80deg)}#button-6:hover a{color:#2d3142}#button-7{position:relative;overflow:hidden;cursor:pointer}#button-7 a{position:relative;left:0;transition:all .35s ease-Out}#dub-arrow{width:100%;height:100%;background:#bfc0c0;left:-200px;position:absolute;padding:0;display:flex;align-items:center;justify-content:center;transition:all .35s ease-Out;bottom:0}#button-7 img{width:20px;height:auto}#button-7:hover #dub-arrow{left:0}#button-7:hover a{left:150px}
    

يتم تعريف الأنماط الأساسية للأزرار، مثل الحجم واللون والحدود.

التأثيرات (hover):

#button-1:hover img {
  opacity: 1;
  transform: translateX(50px);
}

عند تحريك المؤشر فوق الزر (#button-1)، يتم تغيير خصائص الصورة (img) لإظهار تأثير الحركة.

الاستخدام:

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

مثالي للأزرار التي تؤدي إلى صفحات مهمة أو إجراءات محددة، مثل "تحميل" أو "اشتراك".

التخصيص:

• يمكن تغيير الألوان والأحجام والرموز بسهولة لتتناسب مع تصميم الموقع.
• يمكن إضافة المزيد من التأثيرات أو تعديل التأثيرات الحالية لتناسب احتياجاتك.

ملاحظة:

إذا كنت تستخدم مكتبة Font Awesome، تأكد من تضمينها في مشروعك باستخدام الرابط التالي في <head>:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

هذا الكود جاهز للاستخدام وسيعمل بشكل مثالي على أي موقع ويب.

باختصار:

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