آخر الأخبار

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

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

اجمل 3 ازر معاينة وتحميل بشكل احترافي لمواضيع بلوجر

جذب انتباه الزوار: التصميم التفاعلي والحركة عند تمرير الماوس تجذب انتباه الزوار وتشجعهم على النقر على الأزرار.
اجمل 3  ازر معاينة وتحميل بشكل احترافي لمواضيع بلوجر
كيفية الاستخدام:
  1. انسخ الكود بالكامل (CSS + HTML).
    • CSS
      
      <style>
        /* زر 1 */
        .button-m {
          width: 260px;
          height: 70px;
          text-align: center;
          text-decoration: none;
          background: rgba(0, 0, 0, 0);
          color: #c30909 !important;
          font-size: 30px;
          font-weight: bold;
          line-height: 70px;
          border: 2px solid #c30909;
          border-radius: 10px;
          transition: 0.5s;
          display: inline-block;
        }
        .button-m:hover {
          background: #c30909;
          color: #ffffff !important;
          transition: 0.5s;
        }
      
        /* زر 2 */
        .button-s {
          width: 260px;
          height: 70px;
          text-align: center;
          text-decoration: none;
          font-size: 30px;
          font-weight: bold;
          line-height: 70px;
          border-radius: 10px;
          transition: 0.5s;
          display: inline-block;
          margin: 20px 0;
          position: relative;
          color: #000; /* لون النص الأساسي */
          background: transparent; /* خلفية شفافة */
          border: 2px solid #108e97; /* إضافة حدود */
        }
        .button-s:hover {
          background: #108e97;
          color: #e2e2e2 !important;
          transition: 0.5s;
        }
        .button-s:before {
          content: 'للتحميل';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: #09c; /* لون الخلفية */
          color: #ffffff !important;
          border-radius: 10px;
          opacity: 1;
          transition: 0.5s;
          line-height: 70px; /* محاذاة النص عموديًا */
        }
        .button-s:hover:before {
          opacity: 0;
          transition: 0.5s;
          filter: blur(40px);
        }
      
        /* زر 3 */
        .button-g {
          width: 260px;
          height: 70px;
          text-align: center;
          text-decoration: none;
          font-size: 30px;
          font-weight: bold;
          line-height: 70px;
          border-radius: 10px;
          transition: 0.5s;
          color: #e2e1e1 !important;
          background: #6a1cb3;
          display: inline-block;
          position: relative;
          border: 2px solid #6a1cb3; /* إضافة حدود */
        }
        .button-g:hover {
          transition: 0.5s;
        }
        .button-g:before {
          content: 'للتحميل';
          position: absolute;
          top: 0;
          right: 40px;
          left: 0;
          bottom: 0;
          background: black;
          border-radius: 10px 0 0 10px;
          transition: 0.5s;
          line-height: 70px; /* محاذاة النص عموديًا */
        }
        .button-g:hover:before {
          right: 220px;
          transition: 0.5s;
          color: transparent !important;
        }
      
        /* محاذاة الأزرار في الوسط */
        .div-button {
          text-align: center;
        }
      </style>
          
    • html
      
      <div class="div-button">
        <!-- زر 1 -->
        <a href="#" class="button-m">معاينة</a>
      
        <!-- زر 2 -->
        <a href="#" class="button-s">تحميل</a>
      
        <!-- زر 3 -->
        <a href="#" class="button-g">تحميل</a>
      </div>
          
  2. الصقه في قسم HTML/JavaScript في مدونتك (من خلال لوحة تحكم بلوجر).
  3. غيّر الروابط (href) والنصوص (معاينة، تحميل) حسب احتياجاتك.
  4. احفظ التغييرات وشاهد النتيجة على مدونتك.
شرح الكود
زر 1 (Class: .button-m)

التصميم:

  • عرض الزر: 260px.
  • ارتفاع الزر: 70px.
  • لون النص: أحمر داكن (#c30909).
  • حجم الخط: 30px.
  • حدود: 2px صلبة باللون الأحمر الداكن.
  • زوايا مدورة: 10px.
  • خلفية شفافة (rgba(0, 0, 0, 0)).

التفاعل (Hover):

  • عند التمرير فوق الزر، يتغير لون الخلفية إلى الأحمر الداكن (#c30909).
  • يتغير لون النص إلى الأبيض (#ffffff).
زر 2 (Class: .button-s)

التصميم:

  • عرض الزر: 260px.
  • ارتفاع الزر: 70px.
  • لون النص: أسود (#000).
  • حجم الخط: 30px.
  • حدود: 2px صلبة باللون الفيروزي (#108e97).
  • زوايا مدورة: 10px.
  • خلفية شفافة.

التفاعل (Hover):

  • عند التمرير فوق الزر، يتغير لون الخلفية إلى الفيروزي (#108e97).
  • يتغير لون النص إلى الرمادي الفاتح (#e2e2e2).

عنصر :before:

  • يُضيف نص "للتحميل" داخل الزر.
  • لون الخلفية: أزرق فاتح (#09c).
  • عند التمرير فوق الزر، يختفي النص تدريجيًا مع تأثير ضبابي (blur(40px)).
زر 3 (Class: .button-g)

التصميم:

  • عرض الزر: 260px.
  • ارتفاع الزر: 70px.
  • لون النص: رمادي فاتح (#e2e1e1).
  • حجم الخط: 30px.
  • حدود: 2px صلبة باللون البنفسجي (#6a1cb3).
  • زوايا مدورة: 10px.
  • خلفية: بنفسجي (#6a1cb3).

التفاعل (Hover):

  • عند التمرير فوق الزر، يتحرك عنصر :before إلى اليمين مع تأثير انتقالي.

عنصر :before:

  • يُضيف نص "للتحميل" داخل الزر.
  • لون الخلفية: أسود (black).
  • عند التمرير فوق الزر، يتحرك النص إلى اليمين ويختفي تدريجيًا.
محاذاة الأزرار (Class: .div-button)

يتم محاذاة الأزرار في وسط الصفحة باستخدام text-align: center.

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

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

إرسال تعليق