زِرين بسيطين وبتصميم إحترافي يتضمن المعاينة مع التحميل بإدراج حجم الملف ونص اخر، أزرار بتصميم نقي بإستخدام Css فقط مما يجعلها جد خفيفة وأيضا لها منظر جد رائع تجذبك لضغط عليها
ما يتبقى عليك إلى تركيبها وإستعمالها في موقعك نبدأ بالمعاينة أولا1. توجه لقالب >> تحرير
2. ابحث بإستعمال Ctrl+F عن <head/> ثم ضع الكود التالي فوقه
* الكود هو فقط لإظهار الأيقونات إذا كنت تتوفر عليه فلا داعي لإضافته
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
/* CSS Simple Butn Ar1web */
.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);}
<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>
إرسال تعليق