كود زر التنزيل التفاعلي

button CSS

مقدمة عن الكود

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

أهمية هذا النوع من الأزرار

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

شرح مفصل للكود

جزء HTML

<div class="button">
  <a href="#">تنزيل</a>
  <p class="top">انقر للتحميل</p>
  <p class="bottom">12MB .zip</p>
</div>

• <div class="button">: الحاوية الرئيسية للزر
• <a href="#">تنزيل</a>: الرابط الرئيسي للتنزيل
• <p class="top">: نص توجيهي يظهر عند التمرير
• <p class="bottom">: معلومات عن حجم الملف ونوعه

جزء CSS

.button {
  width: 200px;
  margin: 150px auto;
}

يحدد عرض الزر ويسحره في منتصف الصفحة رأسيًا وأفقيًا.

تنسيق الرابط (الزر الرئيسي):

.button a {
  display: block;
  height: 50px;
  width: 200px;
  color: white;
  font: 17px/50px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  background: #299a0b; /* لون أخضر */
  /* تدرجات لونية متعددة لمختلف المتصفحات */
}

يحدد مظهر الزر الرئيسي مع تدرج لوني أخضر وتنسيق النص.

تنسيق الفقرات (النصوص الإضافية):

p {
  background: #222;
  display: block;
  height: 40px;
  width: 180px; 
  margin: -50px 0 0 10px;
  text-align: center;
  font: 12px/45px Helvetica, Verdana, sans-serif;
  color: #fff;
  position: absolute;
  z-index: -1;
  /* تأثيرات الانتقال */
  -webkit-transition: margin 0.5s ease;
     -moz-transition: margin 0.5s ease;
       -o-transition: margin 0.5s ease;
      -ms-transition: margin 0.5s ease;
          transition: margin 0.5s ease;
}

يحدد مظهر النصوص الإضافية مع خلفية داكنة وتأثيرات انتقال سلسة.

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

.button:hover .bottom {
  margin: -10px 0 0 10px;
}

.button:hover .top {
  margin: -80px 0 0 10px;
  line-height: 35px;
}

عند التمرير، تتحرك النصوص الإضافية لأعلى ولأسفل لتصبح أكثر وضوحًا.

تأثيرات النقر (Active):

.button a:active {
  background: #00b7ea; /* يتغير اللون إلى أزرق عند النقر */
}

.button:active .bottom {
  margin: -20px 0 0 10px;
}

.button:active .top {
  margin: -70px 0 0 10px;
}

عند النقر، يتغير لون الزر وتعدل مواضع النصوص الإضافية لإعطاء إحساس بالضغط.

الكود كاملا

<div class="button">
      <a href="#">تنزيل</a>
      <p class="top">انقر للتحميل</p>
      <p class="bottom">12MB .zip</p>
    </div>
    

.button {
  width: 200px;
  margin: 150px auto;
}

.button a {
  display: block;
  height: 50px;
  width: 200px;
  
  /*زبد*/
  color: white;
  font: 17px/50px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  
  /*أذہؤبإحز*/  
  background: #299a0b; /* Old browsers */
  background: -moz-linear-gradient(top,  #299a0b 0%, #299a0b 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#299a0b), color-stop(100%,#299a0b)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #299a0b 0%,#299a0b 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #299a0b 0%,#299a0b 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #299a0b 0%,#299a0b 100%); /* IE10+ */
  background: linear-gradient(top,  #299a0b 0%,#299a0b 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#299a0b', endColorstr='#299a0b',GradientType=0 ); /* IE6-9 */
}

.button a, p {
    -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
  
  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}

p {
  background: #222;
  display: block;
  height: 40px;
  width: 180px; 
  margin: -50px 0 0 10px;
  
  /*زبد*/
  text-align: center;
  font: 12px/45px Helvetica, Verdana, sans-serif;
  color: #fff;
  
  /*دخثخئإحبإ*/
  position: absolute;
  z-index: -1;
  
  /*دإذإصخؤ*/  
  -webkit-transition: margin 0.5s ease;
     -moz-transition: margin 0.5s ease;
       -o-transition: margin 0.5s ease;
      -ms-transition: margin 0.5s ease;
          transition: margin 0.5s ease;
}

/*HOVER*/
.button:hover .bottom {
  margin: -10px 0 0 10px;
}

.button:hover .top {
  margin: -80px 0 0 10px;
  line-height: 35px;
}

/*ACTIVE*/
.button a:active {
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */

}

.button:active .bottom {
  margin: -20px 0 0 10px;
}

.button:active .top {
  margin: -70px 0 0 10px;
}
    

معايــنة

الخلاصــــة

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

كيف كان المقال؟