اكثر من 10 ازرار بأشكال مختلفة على مدونات بلوجر

تم الكشف عن مانع الإعلانات

من فضلك قم بتعطيل أداة مانع الأعلانات أدبلوك AdBlock من المتصفح للدخول للمدونة، أو أستخدم متصفح أخر وشكرا لك :)

اكثر من 10 ازرار بأشكال مختلفة على مدونات بلوجر



اكثر من 10 ازرار بأشكال مختلفة على مدونات بلوجر

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

يمكنك معاينة شكل الازرار من هنا


الان نبدا بشرح التركيب


  1. ابحث في القالب على </head> وضع هذا الكود فوقه مباشرة



  • يمكنك تغيير خلفيات الازرار بوضع الرابط في مكان الاتي


  1. .btnabdoutech23--cover1{background-image:url(هنا خلفية تريدها)}
  2. .btnabdoutech23--cover2{background-image:url(هنا خلفية تريدها)}
  3. .btnabdoutech23--cover3{background-image:url(هنا خلفية تريدها)}
  4. .btnabdoutech23--cover4{background-image:url(هنا خلفية تريدها)}
  5. .btnabdoutech23--cover5{background-image:url(هنا خلفية تريدها)}
الان احفظ القالب 

  • و الان في كل موضوع اردت فيه ضهور زر تضيف هذا الكود




  • الان نشرح كيفية التحكم بشكل الازرار
1- الان لتحكم ب الايقونة
في الايقونات توجد 4 ايقونات في المثال توجد ايقونة الداون لود



<a class="btnabdoutech23 icon-download" href="http://www.abdoutech.com">هنا اسم الملف او الرابط</a>

  • انتا غير icon-download الجزء الذي ب الاحمر 
  • icon-{nameIcon}
  • اسماء الاشكال  cloud, open, clip, link , zip
2- الان لتحكم بتأثير
في التأثيرات يوجد 4 تأثيرات

لاضافت اي تأثير ضف هذا الى جانب الكلاس مثال   class='btnabdoutech23 icon-download btnabdoutech23--shake'

  • انتا غير btnabdoutech23--shake الجزء الذي ب الاحمر
  •  {btnabdoutech23--{ اسم التأثير
  • اسماء التأثيرات flip, rotate, rubber , shake

3- الان لتحكم في الخلفيات
في الخلفيات يوجد 5 خلفيات ويمكنك تغييرهم بوضع رابط الصورة فقط في المكان الذي حددته لك في اول الموضوع

لاضافت اي خلفية ضف هذا جانب الكلاس  مثال  class='btnabdoutech23 icon-download btnabdoutech23--shake btnabdoutech23--cover1'

  • لتغيير الخلفيات انتا تجدهم مرقمين cover1 cover 2 cover3 cover4 cover5 
  • انتا غيرهم كما تريد
وان اعجبك احد ازرار التي في المعاينة يمكنك اخذه ونسخه 
الان نصل الى نهاية الشرح لذا اذا اعجبتك التدوينة لا تنسى الاشتراك في المدونة من هنا لكي تتوصل بكل ما هوا جديد

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

مواضيع منوعة

5التعليقات

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع