زر ثلاثي الأبعاد للتحميل او المعاينة |SWE-UP

3:56 ص غير معرف 0 Comments

زر ثلاثي الأبعاد للتحميل او المعاينة |SWE-UP

اذا كنت تمتلك موقع او مدونة وتريد عرض معاينة او وضع رابط تحميل بشكل جميل فأنك تلجأ في الأغلب الى وضع صورة قد تكون بصيغة gif ولكن هذا يؤثر على سرعة تحميل مدونتك فهذا يعتبر حمل زائد على المدونة لذا اليوم سوف نقوم بتركيب زر يغنيك عن هذا كله وبشكل احترافي حيث انه يتموج عند مرور الماوس عليه كما انه يظهر البعد الثالث سوف يبدوا كأنه حقيقي

تحميل

يمكنك الظغط على المعاينة وتمرير الماوس لرؤية الثاتيرات

سوف نقوم بتقسيم الكود البرمجي ل3 أقسام أولا وضع الزر عند الخمول ثم الثاتير عليه عند مرور مؤشر الماوس ثم الثاتيرات عند الظغط على الزر
نذهب إلى بلوجر>>قالب>>تحريرHTML>>نضع مؤشر الماوس في اي مكان داخل القالب>>نظغط Ctrl+F
ثم نبحث عن هذا الوسم ]]></b:skin> ونلصق الكود التالي فوقه مباشرة .

أولا الكود البرمجي في حالة الخمول

.ButtonOK {

box-shadow: 3px 4px 0px 0px #1564ad;

background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);

background-color:#79bbff;

border-radius:5px;

border:1px solid #337bc4;

display:inline-block;

cursor:pointer;

color:#ffffff;

font-family:arial;

font-size:17px;

font-weight:bold;

padding:12px 44px;

text-decoration:none;

text-shadow:0px 1px 0px #528ecc;

}

ثانيا الكود البرمجي في حالة مرور مؤشر الماوس

.ButtonOK:hover {

background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);

background-color:#378de5;

}

ثالثا الكود البرمجي عند الظغط على الزر

.ButtonOK:active {

box-shadow: 1px 1px 0px 0px #1564ad;

position:relative;

top:1px;

left:1px;

}

احفظ القالب ومبارك عليك حيث الان يمكنك اضافة زر بشكل جميل للتحميل او للمعاينة...الخ بدون استخدام الصور

لاستخدام الزر ما عليك الا كتابة الكود التالي في محرر الHTML

<div class="ButtonOK">تحميل</div>

ما رأيك؟ سهل أليس كذلك يمكنك تغير تدرج ألأوان ليتناسب مع مدونتك وموضوعك من هنا

جرب بنفسك

لا تنسانا من دعائك وكما استفدت من التدوينة اجعل أصدقائك يستفيدوا بمشاركة التدوينة عبر مواقع التواصل الاجتماعي او حتى عبر زر انقل هذه التدوينة لمدونتك كما يشرفنا ان تنضم لمدونتي في الجانب الأيسر صندوق انضم للموقع حتي يصلك كل جديد واي مشاكل تواجهها يمكنك ترك تعليقك أسفل التدوينة كما يمكنك ترك تعليق لتشجيعنا على الاستمرار