آخر الاخبار

showing/random/9

اعلان فوق الموضوع

اضافة ازرار تحميل احترافية الجزء الثانى

اضافة ازرار تحميل احترافية الجزء الثانى

perm_identityفريق العمل | query_builder3/18/2018 | chat_bubble_outlineليست هناك تعليقات

وجدان للمعلوميات


اضافة ازرار معاينة و تحميل احترافية الجزء الثانى



السلام عليك متابعي وجدان للعلوميات بدون مقدمات طويلة و كتابة كثيرة اليوم سنقدم لكم اضة احترافيه الاولى عبارة عن ازرار التحملي و المعاينة احترافية بشكل مختلف

شكل ازرار التحميل و المعاينة 2 :  






1- ادخل لتحرير القالب و اضف الكود التالي فوق ]]></b:skin> :


* ====== Buttons ====== */
.ibtn{-webkit-border-radius:5px;border-radius:5px;display:inline-block;vertical-align:top;font-weight:700;margin:5px;border:1px solid rgba(0,0,0,0.05);-webkit-transition:.2s ease-out;-o-transition:.2s ease-out;transition:.3s ease;-webkit-box-shadow:0 -20px 75px 0 rgba(0,0,0,0.2) inset;box-shadow:0 -20px 75px 0 rgba(0,0,0,0.2) inset;text-shadow:1px 1px 0 rgba(0,0,0,0.1)}
.ibtn:hover{box-shadow: 300px 0 0 rgb(255, 0, 108) inset;}
.ibtn-1{padding:10px 15px;font-size:16px;box-shadow: 4px 0 0 #ff006c inset;}
.ibtn-2{padding:10px 25px;font-size:17px;box-shadow: 4px 0 0 #ff006c inset;}
.ibtn-3{padding:15px 30px;font-size:20px;box-shadow: 4px 0 0 #ff006c inset;}
.ibtn-4{padding:20px 35px;font-size:24px;box-shadow: 4px 0 0 #ff006c inset;}
.iDown:before{content:"\f0ed";font-family:fontawesome;display:inline-block;vertical-align:top;margin-left: 5px;}
.rtl .iDown:before{padding-left:10px}
.ltr .iDown:before{padding-right:10px}
.iDown.ibtn-1:before{font-size:24px}
.iDown.ibtn-2:before{font-size:25px}
.iDown.ibtn-3:before{font-size:28px;font-size:31px}
.iPrev:before{content:"\f002";font-family:fontawesome;display:inline-block;vertical-align:top}
.rtl .iPrev:before{padding-left:10px}
.ltr .iPrev:before{padding-right:10px}
.iPrev.ibtn-1:before{font-size:20px}
.iPrev.ibtn-2:before{font-size:25px}
.iPrev.ibtn-3:before{font-size:28px;font-size:31px}


2 - اضف الكو د التالي بداخل المشاركات بداخل كود html الخاص بالمشاركة :


  <div style="text-align: center;">
<a class="ibtn1 iDown ibtn-1" href="#" rel="nofollow" style="background-color: #212669; color: white;" target="_blank">تحميل</a><a class="ibtn1 iPrev ibtn-1" href="#" rel="nofollow" style="background-color: #212669; color: white;" target="_blank">معاينة</a>
<a class="ibtn1 iDown ibtn-1" href="#" rel="nofollow" style="background-color: #212669; color: white;" target="_blank">تحميل</a>
<a class="ibtn1 iDown ibtn-1" href="#" rel="nofollow" style="background-color: #212669; color: white;" target="_blank">تحميل</a>
</div>
  


3 - تخصيص لون و شكل الازرار :


يمكنك التحكم في لون الازار و لن النص بداخل الازرار  كما شئت من خلال تغيير قيمة : 


4 -background-color: #212669  لتغيير لون الازرار 
5 -color: white  لون الخط على الازرار
3- لتغيير حجم الازرار ضع احد هذه القيم  ibtn-1 = صغر , ibtn-2 = متوسط , ibtn-3 = كبير , ibtn-4 = كبير جدا
2- اتركه كما هو 
1-  لتغيير شكل الزرار مقوسة الحواف او حادة و متسطيلة ibtn = ازرار مقوسة الحواف , ibtn-1 = ازرار حادة و مستطيلة مثل


ملحوظه : عن الوقوف على الازرار يظهر او يمر لون اخر

ضع تعليقك

إدعمنا بتعليقك ومشاركتك للموضوع . وشكرا

اعلان أسفل الموضوع