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

أزرار بسيطة تحميل معاينة التحديث الثاني بتأثير جميل كالعادة الأناقة كل شيئ بالنسبة للأزرار ، لمعاينة الأزرار الأولى من الرابط التالي : أزرار بسيطة V1 | معاينة تحميل

• معاينة من Js
• معاينة من مدونة

شرح طريقة التركيب 

1. توجه لقالب >> تحرير 

2. ابحث بإستعمال Ctrl+F عن <head/>

3. ضع الكود التالي فوقه

* الكود هو فقط لإظهار الأيقونات إذا كنت تتوفر عليه فلا داعي لإضافته

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

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

5.  ضع الكود التالي فوقه 

/* CSS BUTTON V2 */
.ar1web-button2 {margin:20px auto;padding:0;width:auto;text-align:center;}
.ar1web-button {height:40px;display:inline-block;border:3px solid #f57360;font-family:Electrolize,ge_ss_tvbold;font-size:20px;font-weight:400;text-align:center;text-decoration:none;
color:#f56954;overflow:hidden;border-radius:5px;}
a.ar1web-button {padding:0;margin:0;line-height:0;}
.ar1web-button .icon {margin-right:6px;}
.ar1web-button .ar1web-button-depan,.ar1web-button .ar1web-button-belakang {display:block;
padding:0 20px;line-height:40px;transition:margin .4s;}
.ar1web-button .ar1web-button-depan {background-color:#f56954;color:#fff;}
.ar1web-button .ar1web-button-belakang {background-color:#fff;color:#f56954;}
.ar1web-button:hover .ar1web-button-depan {margin-top:-40px;}
.ar1web-button3 {margin:20px auto;padding:0;width:auto;text-align:center;}
.ar1web-buttondemo {height:40px;display:inline-block;border:3px solid #0ea9dc;font-family:Electrolize,ge_ss_tvbold;font-size:20px;font-weight:400;text-align:center;text-decoration:none;color:#00a1d6;overflow:hidden;border-radius:5px;}
a.ar1web-buttondemo {padding:0;margin:0;line-height:0;}
.ar1web-buttondemo .icon {margin-right:6px;}
.ar1web-buttondemo .ar1web-button-depan,.ar1web-buttondemo .ar1web-button-belakang {display:block;padding:0 20px;line-height:40px;transition:margin .4s;}
.ar1web-buttondemo .ar1web-button-depan {background-color:#00a1d6;color:#fff;}
.ar1web-buttondemo .ar1web-button-belakang {background-color:#fff;color:#00a1d6;}
.ar1web-buttondemo:hover .ar1web-button-depan {margin-top:-40px;}

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

كود المعاينة

<div class="ar1web-button3"><a class="ar1web-buttondemo" href="#" target="_blank"><br>
<div class="ar1web-button-depan"><span class="icon fa fa-eye"></span> مشاهدة الحلقة<br>
</div><div class="ar1web-button-belakang"><span class="icon fa fa-arrow-circle-left"></span> ماذا تفعل<br>
</div></a><br>
</div>

كود التحميل

div class="ar1web-button2"><a class="ar1web-button" href="#" target="_blank"><br>
<div class="ar1web-button-depan"><span class="icon fa fa-cloud-download"></span> تحميل مباشر<br>
</div><div class="ar1web-button-belakang"><span class="icon fa fa-hdd-o"></span> 20MB :الحجم<br>
</div></a><br>
</div>