كيف تصنع أزرارًا جذابة بتأثيرات مرئية رائعة

هذا الكود هو مثال لتصميم زرين (Buttons) باستخدام HTML وCSS

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

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

HTML: يحتوي على عنصر <div> يمثل حاوية مركزية تحتوي على زرين (<button>).

CSS: يحتوي على أنماط لتنسيق الصفحة والأزرار، بما في ذلك التدرجات اللونية، الظلال، والتحولات (transitions).

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

أجزاء HTML:

<div class="center">
    <button id="b1"><span>Button</span></button>
    <button id="b2"><span>Button</span></button>
</div>
  

1. <div class="center">: حاوية تحتوي على الزرين. تم تصميمها لتوسيط المحتوى في منتصف الصفحة.
2. <button>: يمثل زرًا. يحتوي على عنصر <span> داخلي لعرض النص.
3. id="b1" و id="b2": معرفات فريدة تستخدم لتطبيق أنماط مختلفة على كل زر.

أجزاء CSS:

تنسيق body:

body {
  background: rgb(0 10 16);
  height: 0;
  width: 0;
}
  

1. background: rgb(0 10 16): يعين لون خلفية الصفحة إلى لون أزرق غامق.
2. height: 0; width: 0;: هذه القيم غير صحيحة هنا، لأنها تجعل عرض وارتفاع الصفحة صفرًا. يجب إزالتها أو تعديلها.

تنسيق .center:

.center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
  

1. top: 50%; left: 50%; transform: translate(-50%, -50%);: تستخدم لتوسيط الحاوية في منتصف الصفحة.
2. display: flex; justify-content: center; align-items: center;: يجعل العناصر داخل الحاوية (الأزرار) متمركزة أفقيًا وعموديًا.

تنسيق button:

button {
  align-items: center;
  margin: 30px;
  border: 0;
  border-radius: 8px;
  box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
  box-sizing: border-box;
  color: #FFFFFF;
  display: flex;
  font-family: Phantomsans, sans-serif;
  font-size: 18px;
  justify-content: center;
  line-height: 1em;
  max-width: 100%;
  min-width: 140px;
  padding: 3px;
  text-decoration: none;
  user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  cursor: pointer;
  transition: all .3s;
}
  

1. border: 0; border-radius: 8px;: يزيل الحدود ويجعل زوايا الزر مدورة.
2. box-shadow: يضيف ظلًا حول الزر لإعطائه تأثيرًا ثلاثي الأبعاد.
3. color: #FFFFFF;: يعين لون النص داخل الزر إلى الأبيض.
4. font-family و font-size: يحددان الخط وحجم النص.
5. transition: all .3s;: يضيف تأثير انتقال سلس عند التمرير أو النقر.

تنسيق #b1 و #b2:

#b1 {
  background-image: linear-gradient(90deg, rgba(32,224,255,1) 0%, rgba(128,100,255,1) 50%, rgba(255,55,140,1) 100%);
}

#b2 {
  background-image: linear-gradient(90deg, rgba(22,232,63,1) 0%, rgba(31,208,203,1) 48%, rgba(255,0,250,1) 100%);
}
  

1. background-image: يعين تدرجات لونية مختلفة لكل زر:

• #b1: تدرج من الأزرق إلى البنفسجي إلى الوردي.
• #b2: تدرج من الأخضر إلى الفيروزي إلى الوردي.

تنسيق button span:

button span {
  background-color: rgb(5, 6, 45);
  padding: 16px 24px;
  border-radius: 6px;
  width: 100%;
  height: 100%;
  transition: 300ms;
}
  

1. background-color: يعين لون خلفية النص داخل الزر.
2. padding: يضيف مساحة داخلية حول النص.
3. border-radius: يجعل زوايا الخلفية مدورة.
4. transition: يضيف تأثير انتقال سلس عند التمرير.

تأثيرات التمرير (hover) والنقر (active):

button:hover span {
  background: none;
}

button:active {
  transform: scale(0.9);
}
  

1. button:hover span: عند التمرير فوق الزر، تختفي خلفية النص (background: none).
2. button:active: عند النقر على الزر، يتم تصغيره بنسبة 90% (transform: scale(0.9)).

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

• تصميم جذاب: يستخدم التدرجات اللونية والظلال لإعطاء الأزرار مظهرًا عصريًا.
• تفاعلية: يوفر تجربة مستخدم ممتعة من خلال تأثيرات التمرير والنقر.
• توسيط العناصر: يعرض الأزرار في منتصف الصفحة، مما يجعله مثاليًا لصفحات الهبوط (Landing Pages) أو الواجهات البسيطة.
• سهولة التخصيص: يمكن تعديل الألوان، الأحجام، والتأثيرات بسهولة لتناسب أي تصميم.

كيفية استخدامه:

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

مثال عملي:

إذا أردت استخدام هذا الكود في صفحة ويب، يمكنك ببساطة نسخ ولصق الكود في ملف index.html وملف style.css، ثم فتح الصفحة في المتصفح لرؤية النتيجة.

تحسينات مقترحة:

• إصلاح height و width في body لتصحيح حجم الصفحة.
• إضافة وظائف JavaScript للأزرار لجعلها تفعل شيئًا عند النقر.
• جعل التصميم متجاوبًا (Responsive) باستخدام استعلامات الوسائط (Media Queries).

الكود كاملا

<style>
body{
  background: rgb(0 10 16);
  height: 0;
  width: 0;
}
.center{
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
 align-items: center;
 margin: 30px;
 border: 0;
 border-radius: 8px;
 box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
 box-sizing: border-box;
 color: #FFFFFF;
 display: flex;
 font-family: Phantomsans, sans-serif;
 font-size: 18px;
 justify-content: center;
 line-height: 1em;
 max-width: 100%;
 min-width: 140px;
 padding: 3px;
 text-decoration: none;
 user-select: none;
 touch-action: manipulation;
 white-space: nowrap;
 cursor: pointer;
 transition: all .3s;
}

#b1{
 background-image: linear-gradient(90deg, rgba(32,224,255,1) 0%, rgba(128,100,255,1) 50%, rgba(255,55,140,1) 100%);
}

#b2{
 background-image: linear-gradient(90deg, rgba(22,232,63,1) 0%, rgba(31,208,203,1) 48%, rgba(255,0,250,1) 100%);
}

button:active,
button:hover {
 outline: 0;
}

button span {
 background-color: rgb(5, 6, 45);
 padding: 16px 24px;
 border-radius: 6px;
 width: 100%;
 height: 100%;
 transition: 300ms;
}

button:hover span {
 background: none;
}

button:active {
 transform: scale(0.9);
}
</style>


 <div class="center">
    <button id="b1"><span>Button</span></button>
    <button id="b2"><span>Button</span></button>
   </div>
    

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