كيفية الاستخدام الأزرار (الشرح لمشتري القالب)

 كيفية الاستخدام (الشرح لمشتري القالب)

لاستخدام الأزرار، يجب على الكاتب الانتقال إلى وضع "عرض HTML" (HTML view) في محرر المقالات ولصق الأكواد التالية. لقد قمت بتضمين أيقونات SVG جذابة مباشرة في الكود.

1. الزر الأساسي (للتحميل المباشر):

<a class="pro-btn btn-primary" href="ضع رابط التحميل هنا" target="_blank" rel="nofollow noopener">
  <svg fill="currentColor" viewBox="0 0 20 20"><path clip-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
  <span>تحميل مباشر</span>
</a>

تحميل مباشر

2. الزر الثانوي (للمعاينة أو رابط بديل):

<a class="pro-btn btn-secondary" href="ضع رابط المعاينة هنا" target="_blank">
  <svg fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.022 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
  <span>مشاهدة المعاينة</span>
</a>

مشاهدة المعاينة

مثال للاستخدام معًا (في وسط الصفحة):
يمكن وضع الأزرار داخل div لتوسيطها في الصفحة.

<div style="text-align: center; margin-top: 20px; margin-bottom: 20px;">

<!-- === زر التحميل المباشر (بالأيقونة الجديدة) === -->
<a class="pro-btn btn-primary" href="ضع-رابط-التحميل-هنا" target="_blank" rel="nofollow noopener">
  <svg fill="currentColor" viewBox="0 0 20 20"><path clip-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
  <span>تحميل مباشر</span>
</a>

<!-- === زر المعاينة (كما هو) === -->
<a class="pro-btn btn-secondary" href="ضع-رابط-المعاينة-هنا" target="_blank" rel="nofollow noopener">
  <svg fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.022 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
  <span>مشاهدة المعاينة</span>
</a>

</div>

تحميل مباشر مشاهدة المعاينة

جرب هذه الأكواد في مقال جديد وسترى كيف تبدو احترافية.