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

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

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

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

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

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

.btnabdoutech23--cover1{background-image:url(هنا خلفية تريدها)}
.btnabdoutech23--cover2{background-image:url(هنا خلفية تريدها)}
.btnabdoutech23--cover3{background-image:url(هنا خلفية تريدها)}
.btnabdoutech23--cover4{background-image:url(هنا خلفية تريدها)}
.btnabdoutech23--cover5{background-image:url(هنا خلفية تريدها)}

الان احفظ القالب

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

الان نشرح كيفية التحكم بشكل الازرار

1- الان لتحكم ب الايقونة

في الايقونات توجد 4 ايقونات في المثال توجد ايقونة الداون لود

<a class="btnabdoutech23 icon-download" href="https://www.abdoutech.org">هنا اسم الملف او الرابط</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
انتا غيرهم كما تريد

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

<a class="btnabdoutech23 btnabdoutech23--flip icon-open" href="https://www.abdoutech.org/">تأثير 1</a>
<a class="btnabdoutech23 btnabdoutech23--rotate icon-open" href="https://www.abdoutech.org/">تأثير 2</a>
<a class="btnabdoutech23 btnabdoutech23--rubber icon-open" href="https://www.abdoutech.org/">تأثير 3</a>
<a class="btnabdoutech23 btnabdoutech23--shake icon-open" href="https://www.abdoutech.org/">تأثير 4</a>

<a class="btnabdoutech23 icon-download" href="https://www.abdoutech.org/">تحميل مباشر</a>
<a class="btnabdoutech23 icon-cloud" href="https://www.abdoutech.org/">تحميل إلى السحابة</a>
<a class="btnabdoutech23 icon-open" href="https://www.abdoutech.org/">علامة تبويب جديدة</a>
<a class="btnabdoutech23 icon-clip" href="https://www.abdoutech.org/">مستند</a>
<a class="btnabdoutech23 icon-link" href="https://www.abdoutech.org/">فتح الرابط</a>
<a class="btnabdoutech23 icon-zip" href="https://www.abdoutech.org/">ملف مضغوط</a>

<a class="btnabdoutech23 btnabdoutech23--cyan icon-open" href="https://www.abdoutech.org/">سماوي اللون</a>
<a class="btnabdoutech23 btnabdoutech23--red icon-open" href="https://www.abdoutech.org/">لون احمر</a>
<a class="btnabdoutech23 btnabdoutech23--green icon-open" href="https://www.abdoutech.org/">الون الاخضر</a>
<a class="btnabdoutech23 btnabdoutech23--amber icon-open" href="https://www.abdoutech.org/">لون الاصفر</a>
<a class="btnabdoutech23 btnabdoutech23--purple icon-open" href="https://www.abdoutech.org/">اللون البنفسجي</a>
<a class="btnabdoutech23 btnabdoutech23--indigo icon-open" href="https://www.abdoutech.org/">اللون النيلي</a>
<a class="btnabdoutech23 btnabdoutech23--teal icon-open" href="https://www.abdoutech.org/">لون البط البري</a>

<a class="btnabdoutech23 btnabdoutech23--rubber btnabdoutech23--purple btnabdoutech23--cover1 icon-zip" href="https://www.abdoutech.org/">ملف مضغوط</a>
<a class="btnabdoutech23 btnabdoutech23--shake btnabdoutech23--green btnabdoutech23--cover2 icon-cloud" href="https://www.abdoutech.org/">تحميل إلى السحابة</a>
<a class="btnabdoutech23 btnabdoutech23--rotate btnabdoutech23--indigo btnabdoutech23--cover4 icon-clip" href="https://www.abdoutech.org/">قراءة المستندات</a>
<a class="btnabdoutech23 btnabdoutech23--flip btnabdoutech23--teal btnabdoutech23--cover5 icon-link" href="https://www.abdoutech.org/">فتح الرابط</a>

الان نصل الى نهاية الشرح لذا اذا اعجبتك التدوينة لا تنسى الاشتراك في المدونة من هنا لكي تتوصل بكل ما هوا جديد

Forms

عبدو تكنولوجي

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

قد تُعجبك هذه المشاركات

تعليقات