آخر الأخبار

استكشف في مدونة أوعي وشك عالم الابتكار

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

تصميم أزرار بتأثيرات تدرج لوني مذهلة باستخدام CSS

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

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

شرح الكود:

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

<div class="kacompos-dakucels">: هذه الحاوية تحتوي على مجموعة من الأزرار. تم تنسيقها لتكون في وسط الصفحة مع هوامش (margin: 10%) ونص مركزي (text-align: center).

تصميم الأزرار:

<button class="constructos-knopok">: كل زر يحتوي على الفئة constructos-knopok التي تحدد التصميم العام للأزرار.

  • العرض والارتفاع: width: 200px; height: 55px.
  • الخط: font-size: 16px; font-weight: 600; color: #fff.
  • الحدود: border: none; border-radius: 50px (حواف مدورة).
  • الخلفية: استخدام تدرجات لونية (background-image: linear-gradient) مع تأثيرات ظل (box-shadow).
  • التحولات: transition: all .4s ease-in-out لإضافة تأثير سلس عند التمرير فوق الزر.

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

عند التمرير فوق الزر، يتم تغيير موضع الخلفية (background-position: 100% 0) لإعطاء تأثير حركي.

التدرجات اللونية:

تم استخدام تدرجات لونية مختلفة لكل زر، مثل:

  • bordovum: تدرج من الأزرق إلى الأخضر.
  • vishnevbo: تدرج من الأصفر إلى الأحمر.
  • zelenyvis: تدرج من الأزرق إلى البنفسجي.
  • nyvistsve: تدرج من الأحمر إلى البرتقالي.
  • klubnicus: تدرج من الأخضر إلى الأزرق.
  • cusoranev: تدرج من الأخضر إلى الأصفر.
  • saturateden: تدرج من البنفسجي إلى الأحمر.
  • adenscarlub: تدرج من الرمادي إلى الأزرق.
  • ubgreken: تدرج من الأزرق الفاتح إلى الأزرق الداكن.
  • nexperienced: تدرج من الوردي إلى البرتقالي.
  • suckingncu: تدرج من الأحمر الفاتح إلى الأحمر الداكن.
فوائد الكود:
  • تصميم جذاب: الأزرار تتميز بتدرجات لونية وظلال تجعلها تبرز في أي موقع.
  • تفاعلية: تأثيرات التمرير تضيف تجربة مستخدم ممتعة.
  • سهولة التخصيص: يمكن تغيير الألوان والأحجام بسهولة لتناسب أي تصميم.
كيفية الاستخدام:

إضافة الكود إلى موقعك:

  1. قم بنسخ الكود الموجود في المقال.
  2. الصقه في ملف CSS الخاص بك لإضافة الأنماط.

    
    .kacompos-dakucels {
      margin: 10%;
      text-align: center;
    }
    
    .constructos-knopok {
      width: 200px;
      font-size: 16px;
      font-weight: 600;
      color: #fff;
      cursor: pointer;
      margin: 20px;
      height: 55px;
      text-align:center;
      border: none;
      background-size: 300% 100%;
    
      border-radius: 50px;
      moz-transition: all .4s ease-in-out;
      -o-transition: all .4s ease-in-out;
      -webkit-transition: all .4s ease-in-out;
      transition: all .4s ease-in-out;
    }
    
    .constructos-knopok:hover {
      background-position: 100% 0;
      moz-transition: all .4s ease-in-out;
      -o-transition: all .4s ease-in-out;
      -webkit-transition: all .4s ease-in-out;
      transition: all .4s ease-in-out;
    }
    
    .constructos-knopok:focus {
      outline: none;
    }
    
    .constructos-knopok.bordovum {
      background-image: linear-gradient(to right, #179bd2, #32de8b, #23d47f, #1cbf71);
      box-shadow: 0 4px 15px 0 rgba(28, 179, 173, 0.75);
    }
    .constructos-knopok.vishnevbo {
      background-image: linear-gradient(to right, #efc550, #d23f14, #ea6189, #d2561d);
      box-shadow: 0 4px 15px 0 rgba(199, 68, 23, 0.75);
    }
    .constructos-knopok.zelenyvis {
      background-image: linear-gradient(to right, #5369c7, #6d3aa0, #597cc5, #7b2abf);
      box-shadow: 0 4px 15px 0 rgba(97, 60, 148, 0.75);
    }
    .constructos-knopok.nyvistsve {
      background-image: linear-gradient(to right, #dc5367, #e48839, #ca8234, #c54b16);
      box-shadow: 0 4px 15px 0 rgba(230, 85, 91, 0.75);
    }
    .constructos-knopok.klubnicus {
      background-image: linear-gradient(to right, #128653, #2ba07b, #25bf75, #21ab68);
      box-shadow: 0 4px 15px 0 rgba(17, 156, 99, 0.75);
    }
    .constructos-knopok.cusoranev {
      background-image: linear-gradient(to right, #0f7f44, #d4c708, #14a4bd, #c9d00e);
      box-shadow: 0 4px 15px 0 rgba(73, 177, 44, 0.75);
    }
    .constructos-knopok.saturateden {
      background-image: linear-gradient(to right, #5548c1, #701c7b, #8986ea, #ea3433);
      box-shadow: 0 4px 15px 0 rgba(110, 38, 144, 0.75);
    }
    .constructos-knopok.adenscarlub {
      background-image: linear-gradient(to right, #232f3c, #3b4b5d, #205375, #43376b);
      box-shadow: 0 4px 15px 0 rgba(49, 62, 78, 0.75);
    }
    .constructos-knopok.ubgreken {
      background-image: linear-gradient(to right, #129cd6, #2f70e2, #11aee4, #3073d4);
      box-shadow: 0 4px 15px 0 rgba(48, 116, 220, 0.75);
    }
    .constructos-knopok.nexperienced {
      background-image: linear-gradient(to right, #d25687, #da6f47, #da145d , #de992c);
      box-shadow: 0 4px 15px 0 rgba(216, 98, 131, 0.75);
    }
    .constructos-knopok.suckingncu {
      background-image: linear-gradient(to right, #e62d35, #d64c51, #fb9598, #d42931);
      box-shadow: 0 5px 15px rgba(245, 146, 150, 0.4);
    }
        
  3. أضف الأزرار إلى HTML باستخدام الفئات المناسبة.

    
    <div class="kacompos-dakucels">
      <button class="constructos-knopok bordovum">تحميل</button>
      <button class="constructos-knopok vishnevbo">تحميل</button>
      <button class="constructos-knopok zelenyvis">تحميل</button>
      <button class="constructos-knopok nyvistsve">تحميل</button>
      <button class="constructos-knopok klubnicus">تحميل</button>
      <button class="constructos-knopok cusoranev">تحميل</button>
      <button class="constructos-knopok saturateden">تحميل</button>
      <button class="constructos-knopok adenscarlub">تحميل</button>
      <button class="constructos-knopok ubgreken">تحميل</button>
      <button class="constructos-knopok nexperienced">تحميل</button>
      <button class="constructos-knopok suckingncu">تحميل</button>
    </div>
        

تخصيص الأزرار:

  • يمكنك تغيير الألوان عن طريق تعديل التدرجات اللونية في CSS.
  • يمكنك تغيير حجم الأزرار عن طريق تعديل width و height.
نصيحة أخيرة:

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

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

معاينة الكود

🌟 انتبه عزيزي أعضاء المجتمع! 🌟
نحن متحمسون لمشاركتك في مناقشاتنا الديناميكية. لضمان بيئة محترمة وشاملة للجميع، نطلب تعاونكم مع الإرشادات التالية:
1. احترام الخصوصية: يرجى عدم مشاركة معلومات حساسة أو شخصية في تعليقاتك.
2. انشر الإيجابية: نحن نتمسك بسياسة عدم التسامح مطلقًا مع خطاب الكراهية أو اللغة المسيئة. دعونا نحافظ على محادثاتنا محترمة وودية.
3. اللغة المفضلة: لا تتردد في التعبير عن نفسك باللغة الإنجليزية أو العربية. ستساعدنا هاتان اللغتان في الحفاظ على مناقشة واضحة ومتماسكة.
4. احترام التنوع: لتعزيز جو شامل، نطلب منك بكل احترام تجنب مناقشة المسائل الدينية في تعليقاتك.
تذكر أن مساهماتك قيمة، ونحن نقدر التزامك بجعل مجتمعنا مكانًا ترحيبيًا للجميع. دعونا نواصل التعلم والنمو معًا من خلال المناقشات البناءة والاحترام المتبادل.
شكرًا لكونك جزءًا من مجتمعنا اوعي وشك! 🌟

إرسال تعليق