أداة زر تحميل تفاعلي قابل للتخصيص لمواقع الويب

تعليمات الاستخدام لإضافة زر "Download" إلى موقعك أو مدونتك:

1. الوصف العام للزر:

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


2. الخطوات لإضافة الكود إلى موقعك:
   • الخطوة 1: قم بنسخ الكود التالي من HTML و CSS و JavaScript في ملف HTML الخاص بموقعك أو مدونتك، في المكان الذي ترغب أن يظهر فيه الزر.
   • الخطوة 2: في السطر الذي يحتوي على الكود، قم بتعديل الرابط داخل السمة data-link بالعنوان الذي ترغب في توجيه الزوار إليه عند الضغط على الزر. على سبيل المثال:

     <span data-link="https://www.example.com">Download</span>

   • الخطوة 3: بعد إدخال الكود، قم بحفظ التغييرات على ملفك أو منشور المدونة، وسيتم عرض الزر التفاعلي للمستخدمين على موقعك.
3. كيفية تخصيص الزر:
   • تغيير النص: لتغيير النص الذي يظهر في الزر (على سبيل المثال من "Download" إلى نص آخر)، يمكنك تعديل المحتوى داخل العنصر <span class="button-text">Download</span>.
   • تغيير الرابط: لتغيير الرابط الذي يتم فتحه عند الضغط على الزر، قم بتعديل السمة data-link بالعنوان الجديد الذي ترغب في ربطه.
   • تغيير الألوان: يمكنك تخصيص الألوان بتعديل خصائص CSS الخاصة بالزر مثل background-color وbox-shadow لتتناسب مع تصميم موقعك.
   • تغيير الأيقونات: يمكنك تغيير الأيقونات باستخدام مكتبة Font Awesome عن طريق تعديل كود الأيقونة داخل العنصر <i class="fa-solid fa-cloud-arrow-down"></i>.
4. شرح كيفية عمل الكود:
   • المرحلة الأولى: عند الضغط على الزر، يتم تفعيل تأثير التحميل الذي يستمر لمدة 6 ثوانٍ، حيث تتحرك الخلفية اللونية من اليسار إلى اليمين.
   • المرحلة الثانية: بعد مرور 6 ثوانٍ، يتغير النص إلى "Completed!" والأيقونة تتغير إلى علامة الصح (check).
   • المرحلة الثالثة: بعد تغيير الأيقونة والنص، يتم فتح الرابط الذي تم تحديده في نافذة جديدة.
   • المرحلة الرابعة: بعد فتح الرابط، يتم إعادة الزر إلى حالته الأصلية (النص "Download" والأيقونة الأصلية).
5. التفاعل مع الزر:
   • نص الزر: النص الموجود في الزر يظهر على شكل "Download" في البداية، ويصبح "Completed!" بعد الضغط عليه. يمكنك تعديل هذا النص بما يتناسب مع احتياجاتك.
   • الوظيفة عند الضغط: عند الضغط على الزر، يتم تعطيل التفاعل مع الزر لفترة قصيرة (لتفادي الضغط المتكرر) بينما يظهر تأثير التحميل، ثم يتم فتح الرابط بعد إتمام العملية.
   • فتح الرابط: الرابط الذي يتم فتحه يعتمد على السمة data-link. تأكد من تحديثه بالشكل الصحيح ليوجه المستخدمين إلى المكان المناسب.
6. ملاحظات:
   • دعم المتصفحات: الكود يدعم أغلب المتصفحات الحديثة. تأكد من أن المتصفح المستخدم يدعم تأثيرات CSS و JavaScript.
   • تعديل الحركات: يمكنك تعديل مدة التأثيرات أو الحركات باستخدام خصائص CSS مثل transition و@keyframes.
   • التوافق مع الأجهزة: الزر سيكون متوافقًا مع الأجهزة المختلفة (الحواسيب، الهواتف، والأجهزة اللوحية) نظرًا لاستخدام تصميم متجاوب في CSS.

مثال للكود الكامل:

Download

الكود الخاص بالاداة

 <div class="ch-button">
      <div class="button-content">
        <i class="fa-solid fa-cloud-arrow-down"></i>
        <span data-link="https://www.themebiz.net/" class="button-text">Download</span>
      </div>
  </div>

<style>/* <![CDATA[ */
.ch-button{position:relative;margin:auto auto 0.9375rem;padding:10px;width:40%;min-width:300px;max-width:50%;background:#7D2AE8;border-radius:55px;cursor :pointer;box-shadow:0 5px 10px rgba(0,0,0,0.2);transition:all .4s cubic-bezier(0.68,-0.55,0.265,1.55);overflow:hidden}
.ch-button.active{height:10px;width:40%;min-width:300px;max-width:50%;padding:5px}
.ch-button::before{content:"";position:absolute;top:0;left:-100%;height:100%;width:100%;background:#5b13b9;border-radius:55px;transition: all 6s ease-in-out}
.ch-button.active::before{animation:layer 6s ease-in-out forwards}
@keyframes layer {
100%{left:0}
}
.ch-button .button-content{height:100%;width:100%;display:flex;align-items:center;justify-content:center;transition:all .2s ease;transition-delay:.2s}
.ch-button.active .button-content{transform:translateY(60px)}
.ch-button .button-content i, .ch-button .button-content .button-text{color:#fff;font-size:20px;font-weight:500}
.ch-button .button-content .button-text{font-size:18px;margin-left:8px}
/* ]]> */</style>

<script>//<![CDATA[
      const chbutton = document.querySelector(".ch-button"),
          _link = document. querySelector('.button-text');
    if (_link) {

    }
    chbutton.addEventListener("click", () =>{
      chbutton.classList.add("active");
      chbutton.style.pointerEvents = "none";
      setTimeout(()=>{
        let _target = _link. getAttribute('data-link');
        console.log(_target);
        chbutton.classList.remove("active");
        chbutton.querySelector("i"). classList.replace("fa-cloud-arrow-down", "fa-check");
        chbutton.querySelector(".button-text").innerText = "Completed!";
        setTimeout(()=>{
        window.open(_target, '_blank');
        setTimeout(()=>{
  		chbutton.querySelector("i"). classList.replace("fa-check", "fa-cloud-arrow-down")
        chbutton.querySelector(".button-text").innerText = "Download";
        chbutton.style.pointerEvents = "auto";
         },2000);
          },1000);
      },6000);
    });
//]]></script>
<link href='https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro-v6@18657a9/css/all.min.css' rel='stylesheet' type='text/css'/ >