عمل أزرار بحسب المحتوى الذي تستخدمه معاينة تحميل شراء وغيرها

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

كمواقع تحميل البرامج والملفات أو التسويق بالعمولة وغيرها

أحيانا يصعب إيجاد زر يكون مظهره مناسب لكل محتوى نستخدمهه أو أن الزر موجود لكن تنسيقه غير متماشي مع القالب

فربما يكون الزر غاية في الجمال لكنه غير مناسب لشكل القالب وتنسيقه العام

الحل عندنا ان شاء الله 

تم عمل مظهر زر بشكل مبسط بحيث ينسجم مع كل القوالب كذلك يمكن تنسيقه بحسب المحتوى الذي نهدف لإستخدامه

يمكنك معاينة بعض الأزرار التي يمكن عملها بالكود

معاينة تحميل شـراء

طريقة الإستخدام

كود الستايل

أولا قم بالإطلاع على هذا الموضوع من هنــا فمن خلاله يمكنك أن تقرر هل ستضيف الكود في الموضوع ام في القالب نفسه

<style>

.CNMUB{overflow:hidden;max-width:100%;margin:10px auto;clear:both;text-align:center;position:relative}

.CNMUB a{text-decoration:none;margin:0 5px 10px !important;position:relative;height:48px;line-height:48px;padding:0 15px !important ;overflow:hidden;display:inline-block;border-radius:4px;color:#fff;font-family:inherit;font-size:16px;transition:all .4s ease}

.CNMUB a:hover{background-color:#222}

.CNMUB a *{float:right;line-height:inherit}

.CNMUB i{font-size:20px;margin-left:8px}

.CNMUB img {width: auto !important;height: 30px !important;max-height: 30px !important;max-width: 40px !important;margin: 9px -6px 0 5px;}

.CNB1 {background-color: #2A9F65;}  

</style>

لو قررت اضافته في القالب تضيف فوق الوسم </head> أما لو في الموضوع تضيفه في أى مكان يمكن في نهاية الموضوع بعد تحويل الوضع الى وضع HTML 

تنسيق الكود

الكود الأحمر هو الذي ستحتاج أن تكرره إن أردت أكثر من زر والكود الأصفر بداخله هو لون الزر

الرقم 4 هو رقم استدارة الزر زده أو قلله لزيادة أو تقليل الإستدارة

كود HTML

هذا الكود ستضيفه داخل الموضوع في المكان الذي تريد

<div class="CNMUB">

<!--بداية الزر-->

<a class="CNB1" href="#" target="_blank">

<i class="fa fa-download"></i>   

<span>اسم الزر</span> 

</a>   

<!--نهاية الزر-->

</div>

 كرر من أول كود البداية حتى كود النهاية الخاص بالزر لتحصل على زر جديد

رمز # تستبدله بالرابط المراد فتحه

الكود المعلم بالأحمر هو كلاس الزر عدل الرقم 1 برقم آخر لتحصل على زر جديد مع تغيير نفس الأمر في الكود الأحمر الموجود في خطوة الستايل السابقة لتعطيه لون مميز له هو أيضاً كما هو واضح في المعاينة

كلمة اسم الزر عدلها بما تريد

الكود المعلم بالأخضر هو كود الأيقونة الموجودة على الزر يمكنك أن تعدلها بأى أيقونة تعجبك تكون مناسبه للزر بحسب المحتوى الخاص لديك ويمكنك الرجوع لمكتبة الأيقونات من هنا ونسخ كود HTML الخاص بالأيقونة التي تعجبك

ان كانت تلك المكتبة ليست متاحة في قالبك يمكنك مراجعة هذا الموضوع لتعرف كيف تضيفها

تعرف على خط الأيقونات الرائع Font Awesome

أما لو كنت لا تريد استخدام تلك المكتبة وتريد استخدام صورة أيقونات عادية

استخدم هذا الكود بدلا من كود الأيقونة

<img src="*"/>

واستبدل فيه رمز النجمة برابط صورة الأيقونة

مثال على زر بصورة وليس بأيقونة

رفع الملفات

بهذا الكود الخيارات أمامك مفتوحه لتحصل على أى زر مناسب لمحتوى تقدمه , وبلون يعجبك وكذلك عدم الإعتماد على أزرار مدمجه في قالبك والإعتماد على هذا الكود يكون أفضل لك لانك تستطيع نقل تنسيقها عند تغيير القالب لأى قالب آخر