أزرار بسيطة V1 | معاينة تحميل

السلام عليكم .... �� , اليوم نقدم لكم زر بسيط وبتصميم إحترافي ومميز ⭐ يتضمن المعاينة مع التحميل بإدراج حجم الملف ونص اخر ، أزرار بتصميم نقي بإستخدام Css فقط  وهذه الازرار البسيطة والاحترافية خفيفة جدا  وأيضا لها منظر رائع تجذبك لضغط عليها  ما يتبقى عليك إلى تركيبها وإستعمالها في موقعك ويمكنكم معاينة الازرار قبل تركيبها


شرح طريقة التركيب
1. توجه لقالب >> تحرير 
2. ابحث عن ]]></b:skin أو تضعه فوق </head> بإضافة هذيين الوسميين <style> هنا الكود  </style>
3.  ضع الكود التالي فوقه 

الكود

/* CSS Simple Butn Pro7web.com */
.whitebutton {margin: 20px auto;padding: 20px 0;width: 200px;}
.whitebutton a {background: #fff;color: #666;display: block;font-size: 17px;font-weight: 700;font-family: Electrolize,ge_ss_tvbold;height: 50px;line-height: 50px;text-align: center;text-decoration: none;text-transform: uppercase;width: 200px;position: relative;z-index: 2;}
.whitebutton a:before {content: '\f019';font-family: FontAwesome;font-weight: normal;padding: 8px;margin-right: 6px;}
.whitebutton span {background: #444;color: #fff;display: block;font-size: 12px;font-family: Electrolize,ge_ss_threeregular;height: 40px;line-height: 40px;text-align: center;width: 200px;z-index: 1;text-transform: uppercase;font-weight: bold;}
.whitebutton .up {background: #34B4E2;margin: -25px auto;opacity: 0;border-radius: 0 0 5px 5px;transform: translate(0,-50px);transition: 350ms;}
.whitebutton .down {margin: -30px auto;opacity: 0;border-radius: 5px 5px 0 0;transform: translate(0,-50px);transition: 350ms;}
.whitebutton .down:before {content:'\f14a';font-family: FontAwesome;font-weight: normal;margin-right: 6px;color: #aaa;}
.whitebutton:hover .up {opacity: 1;transform: translate(0,0);}
.whitebutton:hover .down {opacity: 1;transform: translate(0,-90px);}
.whitebuttondemo {margin: 20px auto;padding: 20px 0;width: 200px;}
.whitebuttondemo a {background: #34B4E2;color: #fff;display: block;font-size: 17px;font-weight: 700;font-family:Electrolize,ge_ss_tvbold;height: 50px;line-height: 50px;text-align: center;text-decoration: none;text-transform: uppercase;width: 200px;position: relative;z-index: 2;transition: 350ms;}
.whitebuttondemo a:before {content:'\f002';font-family: FontAwesome;font-weight: normal;padding: 8px;margin-right: 6px;}
.whitebuttondemo a:hover {color:#fff;}
.whitebuttondemo span {background: #444;color: #fff;display: block;font-size: 12px;font-family: Electrolize,ge_ss_threeregular;height: 40px;line-height: 40px;text-align: center;width: 200px;z-index: 1;text-transform: uppercase;font-weight: bold;}
.whitebuttondemo .up {background: #444;margin: -25px auto;opacity: 0;border-radius: 0 0 5px 5px;transform: translate(0,-50px);transition: 350ms;}
.whitebuttondemo:hover .up {opacity: 1;transform: translate(0,0);}
4. ابحث بإستعمال Ctrl+F عن <head/>
5. ضع الكود التالي فوقه

الكود

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
* هام جدا > >  الكود هو فقط لإظهار الأيقونات إذا كنت تتوفر عليه فلا داعي لإضافته

6. أضف الكود الأتي بداخل الموضوع في تبويب HTML

الكود

<div class="whitebuttondemo">
<a href="#" target="_blank">معاينة</a><br>
<span class="up">إضغط للمشاهدة</span></div>
<br>
<div class="whitebutton">
<a href="#" target="_blank">تحميل مباشر</a><br>
<span class="up">إضغط للبدء</span><br>
<span class="down">2.3MB .rar</span></div>

التغييرات الأساسية

* لإستعمال كود واحد مثل معاينة فهو محدد باللون البرتقالي من البداية لنهايته
* ضع الرابط بدل # 
* المحدد باللون الأصفر للكلمات لك حرية التغيير

لا تنسا ان تكن من أعضاء المدونة من هنا , إذا واجهتك اي مشكلة لا تترد فى ترك تعليق
شارك المقال على :

التعليقات

  1. أخوي بعد خيار الشرح
    6. أضف الكود الأتي بداخل الموضوع في تبويب HTML

    مربع عرض الكود هذا كيف تسوية .. وكيف شرحه بالتفصيل

    ردحذف
    الردود
    1. اهلا بيك اخى , عزراً على النأخير
      االيك الشرح بالتفصيل
      ادخل علي اى تدوين ثم اضغط على html كمت مبين لك فى الصورة
      http://store2.up-00.com/2015-12/145071101837461.png
      ثم ضع الاكواد رقم 6 فى الشرح
      كما موضح لك فى الصورة
      http://store2.up-00.com/2015-12/145071101854162.png
      ثم قم تحديث او حفظ التدوينة ثم مبروك لك الاضافة

      حذف

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة

رسالة!

السلام عليكم ، المدونة للبيع مع الصفحة الخاصة بها على الفيسبوك + حساب ادسنس عادي مربوط بها كما ان الددومين متوفر الى 7/2018 ويمكن تجديدة ، توجد طرق عديدة للدفع بأذن الله ويمكننا التعمال من خلال خمسات ان احببت كوسيط

لمن يهمة الامر يراسلني على حسابي علي الفيسبوك من هنا

المشاركات الشائعة

أحدث التعليقات

تم النسخ