اجمل 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.

فوائد الكود

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

أهمية الكود في المدونة

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

أمثلة على استخدامات الأزرار

• زر "معاينة": لتوجيه الزوار إلى صفحة معاينة منتج أو مقال.
• زر "تحميل": لتنزيل ملفات مثل الكتب الإلكترونية، البرامج، أو القوالب.
• زر "اشتراك": للتوجيه إلى صفحة الاشتراك في المدونة.
• زر "تواصل معنا": للتوجيه إلى صفحة الاتصال.

نصائح لتحسين الأزرار

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

معاينة الكود

معاينة تحميل تحميل