أزرار الويب الإصدار 1, أزرار بصور , بأيقونات ,بتأثيرات متغيرة

تعد الازرار واحدة من أكثر الادوات استخداما و فائدة في الويب بشكل عام, لكل من مشرفي و مديري المواقع الى الزائر, وذالك لأنه سهل الفهم و يجذب الإنتباء ويخبرك أن هذا العنصر قابل للنقر .
 في هذا المقال سأستعرض لكم إضافة أزرار قابلة للتخصيص CSS فقط , تستطيع من خلال هذه الإضافة تغيير ألوان الازرار , وضع صورة كخلفية للزر , تغيير أيقوانات لأزرار ,تغيير حجم الزر, إضافة تأثيرات متنوعة للأزرار.

مـعـاينة الإضـافــة

تركيب الأزرار

اتجه الى بلوجر ثم سجل دخولك لمدونتك ثم اختر المظهر ثم تعديل HTML  ثم اتبع الخطوتين التاليتين
أولا عليك إضافة كود CSS الخاص بتنسيق الازرار
ابحث عن الوسم ]]></b:skin> أو </style> وألصق الكو التالي فوقه/قبله


.imgbtn{display:inline-block;font-size:12px;padding:1.2em 1.2em 1.2em calc(50px + 1.2em);border-radius:4px;position:relative;background-color:#263238;color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.5);box-shadow:0 1px 2px 0 rgba(0,0,0,.5);margin:5px;background-size:cover;background-repeat:no-repeat;background-position:center}
@media (min-width:560px){.imgbtn{font-size:14px}}
@media(min-width:768px){.imgbtn{font-size:16px}}
.imgbtn::after,.imgbtn::before{position:absolute;left:0;top:0;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;width:50px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
.imgbtn::before{font-size:18px;z-index:5}
@media (min-width:560px){.imgbtn::before{font-size:20px}}
@media(min-width:768px){.imgbtn::before{font-size:22px}}
.imgbtn::after{background-color:#00BCD4;border-radius: 4px 0 0 4px;content:""}
.imgbtn:active,.imgbtn:focus,.imgbtn:hover{text-decoration:none!important;color:#fff!important}
.imgbtn--small{font-size:12px}
.imgbtn--large{font-size:20px}
.imgbtn--xlarge{font-size:20px;padding:1.2em 1.2em calc(50px + 1.2em)}
.imgbtn--xlarge::after,.imgbtn--xlarge::before{height:50px;width:100%;bottom:0;top:auto}
.imgbtn--amber,.imgbtn--cyan,.imgbtn--green,.imgbtn--indigo,.imgbtn--purple,.imgbtn--red,.imgbtn--teal{border-width:2px;border-style:solid}
.imgbtn--cyan{background-color:#224851;border-color:#00BCD4}
.imgbtn--red{background-color:#532f30;border-color:#f44336}
.imgbtn--red::after{background-color:#F44336}
.imgbtn--green{background-color:#3e4935;border-color:#8bc34a}
.imgbtn--green::after{background-color:#8BC34A}
.imgbtn--amber{background-color:#554927;border-color:#ffc107}
.imgbtn--amber::after{background-color:#FFC107}
.imgbtn--purple{background-color:#362d4b;border-color:#673AB7}
.imgbtn--purple::after{background-color:#673AB7}
.imgbtn--indigo{border-color:#3f51b5;background-color:#2e324a}
.imgbtn--indigo::after{background-color:#3f51b5}
.imgbtn--teal{border-color:#009688;background-color:#224041}
.imgbtn--teal::after{background-color:#009688}
@-webkit-keyframes shake{from,to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,70%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}40%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}}
@keyframes shake{from,to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,70%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}40%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}}
.imgbtn--shake:hover::before{-webkit-animation:shake 1s;animation:shake 1s}@-webkit-keyframes rubber{from,to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.5,1.25,1);transform:scale3d(.5,1.25,1)}50%{-webkit-transform:scale3d(1.2,.85,1);transform:scale3d(1.2,.85,1)}65%{-webkit-transform:scale3d(.9,1.05,1);transform:scale3d(.9,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}}
@keyframes rubber{from,to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.5,1.25,1);transform:scale3d(.5,1.25,1)}50%{-webkit-transform:scale3d(1.2,.85,1);transform:scale3d(1.2,.85,1)}65%{-webkit-transform:scale3d(.9,1.05,1);transform:scale3d(.9,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}}.imgbtn--rubber:hover::before{-webkit-animation:rubber 1s;animation:rubber 1s}@-webkit-keyframes rotate{from{-webkit-transform-origin:center;transform-origin:center}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,360deg);transform:rotate3d(0,0,1,360deg)}}@keyframes rotate{from{-webkit-transform-origin:center;transform-origin:center}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,360deg);transform:rotate3d(0,0,1,360deg)}}.imgbtn--rotate:hover::before{-webkit-animation:rotate 1s;animation:rotate 1s}@-webkit-keyframes flip{from{-webkit-transform:rotate3d(0,1,0,-360deg);transform:rotate3d(0,1,0,-360deg)}40%{-webkit-transform:rotate3d(0,1,0,-190deg);transform:rotate3d(0,1,0,-190deg)}50%{-webkit-transform:rotate3d(0,1,0,-170deg);transform:rotate3d(0,1,0,-170deg)}to{-webkit-transform:rotate3d(0,1,0,0deg);transform:rotate3d(0,1,0,0deg)}}@keyframes flip{from{-webkit-transform:rotate3d(0,1,0,-360deg);transform:rotate3d(0,1,0,-360deg)}40%{-webkit-transform:rotate3d(0,1,0,-190deg);transform:rotate3d(0,1,0,-190deg)}50%{-webkit-transform:rotate3d(0,1,0,-170deg);transform:rotate3d(0,1,0,-170deg)}to{-webkit-transform:rotate3d(0,1,0,0deg);transform:rotate3d(0,1,0,0deg)}}.imgbtn--flip:hover::before{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation:flip 1s;animation:flip 1s}.imgbtn[style]{font-weight:700}

ثانيا إضافة خط الأيقوانات الخاص بالإضافة
ابحث عن الوسم <head> والصق الكو التالي بعده/تحته


<link href="https://raw.githack.com/MohammadQt/font-itheric/master/daicons-buttons.css" rel="stylesheet"></link>


التعامل مع الأزرار وكيفية إضافتها

أولا يجب علينا إضافة الكود الخاص بالرابط الذي يبدو على هذا الشكل <a href="#"></a> وسوف نضيف له الكلاس الأساسي للأزرار ither1btn  و نضيف بجانبة الكلاس الخاص بالأيقونات daicon-nameIcon   حيث يتم استبدال nameIcon بإسم الأيقونة المراد إضافتها لكي يصبح على هذا الشكل <a class="ither1btn daicon-nameIcon" href="رابط هنا">نص هنا</a> 
يمكنك الإختيار من الأيقونات التالية

الأيقونةالكودالوظيفة
daicon-download زر التحميل
daicon-download-alt زر التحميل إضافي
daicon-upload زر الرفع
daicon-upload-alt زر الرفع إضافي
daicon-cloud زر السحابة
daicon-open الفتح بنافذة جديدة
daicon-link Abrir enlace
daicon-lock فتح رابط
daicon-clip مستند
daicon-folder مجلد
daicon-print طباعة
daicon-zip أرشيف ZIP
daicon-rar أرشيف RAR
daicon-buy شراء
daicon-paypal الدفع بإستخدام Paypal

بمجرد الإنتهاء من الإعداد سيصبح الكود الخاص بالزر كالتالي <a class="ither1btn daicon-download" href="رابط هنا">نص هنا</a>
الذي هو مثال لزر التحميل

تغيير الالوان

لتغيير اللوان يجب إضافة هذا الكلاس ither1btn--nameColor الى الكود الخاص بالزر حيث nameColor هو اسم اللون المراد تطبيقه ليصبح الكود على الشكل التالي
  <a class="ither1btn ither1btn--nameColor daicon-download" href="رابط هنا">نص هنا</a>
يتوفر في الإضافة سبعة الوان مختلفة وهي كالتالي
اللونالكود
الازرقcyan
الأحمرred
الاخضرgreen
الذهبيamber
الرجوانيpurple
النيليindigo
البتروليteal

إضافة تاثيرات الى الأزرار

لإضافة التاثيرات الى الازرار يجب اضافة هذا الكلاس ither1btn--nameFrame الى الكود الخاص بالزر حيث nameFrame هو اسم التاثير المراد تطبيقه
ليصبح الكود الخاص بالزر على هذا الشكل
<a class="ither1btn ither1btn--nameFrame daicon-download" href="رابط هنا">نص هنا</a>

يتوفر في الإضافة اربعة تأثيرات مختلفة وهي كالتالي

التأثيرالكود
التفافflip
دورانrotate
الضغطrubber
الاهتزازshake


إضافة صورة كخلفية للزر

لإضافة هذه الميزة علينا اضافة الستايل style="background-image: url(img.png)" الى الكود الخاص بالزر حيث img.png هو رابط الصور المراد جعلها كخلفية
ليصبح الكود الخاص بالزر على هذا الشكل


<a class="ither1btn daicon-download" style="background-image: url(img.png)" href="رابط هنا">نص هنا</a>

تغيير حجم الزر

يتم تغيير حجم الزر عن طريق هذا الكلاس ither1btn--nameSize حيث nameSize هو حجم الزر
ليصبح الكود بهذا الشكل


<a class="ither1btn ither1btn--nameSize daicon-download"  href="رابط هنا">نص هنا</a>

يتوفر في الإضافة 3 أحجام للأزرار وهي كالتالي

الحجمالكود
صغيرsmall
كبيرlarge
كبير جداxlarge


زر بخصائص مشتركة

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


<a class="ither1btn ither1btn--flip ither1btn--red daicon-download" style="background-image: url(https://i.imgur.com/qfHpaZr.jpg)" href="رابط هنا">نص هنا</a>

مـعـاينة الإضـافــة

الى هنا أكون قد وصلت لنهاية المقال , أتمنى ان اكون قد وفقت في طرحه,إن أعجبكم لا تترددو  بمشاركته مع اصدقائكم وترك تعليق لنا و إن كانت لديكم أي استفسارات أيضا اتمنى طرحها في التعليقات .
دمتم في أمان الله وحفظه