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

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

* لإستعمال كود واحد مثل معاينة فهو محدد باللون البرتقالي من البداية لنهايته

* ضع الرابط بدل # 

* المحدد باللون الأصفر للكلمات لك حرية التغيير

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

شارك المقال على :

فيس بوك

تويتر

جوجل بلس

لينكد إن

Karim Mahran‏

كريم مهران , من مصر , مصمم ومطور مواقع , متخصص تحديداً في منصة بلوجر , شغوفٌ بالتدوين , أنشات هذه المدونة لأقدّم لك مُنتجــاً حصرياً أحرص أن يكــون مُفيــداً وشيّقــاً مُختلفاً لك ,محب لإفادة الأخرين بما أملك , أطمح من خلال مقالاتي على هذة المدونة أن تساعِدك على تحقيق أهدافِك و تسهيل حياتك لتُصبح أكثر عطاءاً و إنتاجيّة.

المزيد عني

السابق التالي

مواضيع ذات صلة :