أزرار بسيطة 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>

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

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

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

2 التعليقات

avatar

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

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

avatar

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

الإبتساماتالإبتسامات

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