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

السلام عليكم ورحمة الله وبركاته

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

طريقة التركيب اذهب الى لوحة التحكم ثم الى قالب تحرير html ومن ثم احفظ نسخة
 احتياطية للقالب بحال حدوث اخطاء ، ابحث عن الكود الاتي :

  ]]></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>

هكذا انتهى موضوعنا اي سؤال لاتتردد في طرحه اراكم في تدوينة جديد .

جرب الدرس من هنا .

تحميل