تعد الازرار واحدة من أكثر الادوات استخداما و فائدة في الويب بشكل عام, لكل من مشرفي و مديري المواقع الى الزائر, وذالك لأنه سهل الفهم و يجذب الإنتباء ويخبرك أن هذا العنصر قابل للنقر .
في هذا المقال سأستعرض لكم إضافة أزرار قابلة للتخصيص CSS فقط , تستطيع من خلال هذه الإضافة تغيير ألوان الازرار , وضع صورة كخلفية للزر , تغيير أيقوانات لأزرار ,تغيير حجم الزر, إضافة تأثيرات متنوعة للأزرار.
مـعـاينة الإضـافــة
تركيب الأزرار
اتجه الى بلوجر ثم سجل دخولك لمدونتك ثم اختر المظهر ثم تعديل HTML ثم اتبع الخطوتين التاليتين
أولا عليك إضافة كود CSS الخاص بتنسيق الازرارابحث عن الوسم
.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}
ثانيا إضافة خط الأيقوانات الخاص بالإضافة
ابحث عن الوسم
<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>
يمكنك الإختيار من الأيقونات التالية
بمجرد الإنتهاء من الإعداد سيصبح الكود الخاص بالزر كالتالي<a class="ither1btn daicon-download" href="رابط هنا">نص هنا</a>
الذي هو مثال لزر التحميل
ither1btn--nameColor الى الكود الخاص بالزر حيث nameColor هو اسم اللون المراد تطبيقه ليصبح الكود على الشكل التالي
<a class="ither1btn ither1btn--nameColor daicon-download" href="رابط هنا">نص هنا</a>
يتوفر في الإضافة سبعة الوان مختلفة وهي كالتالي
ither1btn--nameFrame الى الكود الخاص بالزر حيث nameFrame هو اسم التاثير المراد تطبيقه
ليصبح الكود الخاص بالزر على هذا الشكل
<a class="ither1btn ither1btn--nameFrame daicon-download" 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 |
بمجرد الإنتهاء من الإعداد سيصبح الكود الخاص بالزر كالتالي
الذي هو مثال لزر التحميل
تغيير الالوان
لتغيير اللوان يجب إضافة هذا الكلاسيتوفر في الإضافة سبعة الوان مختلفة وهي كالتالي
| اللون | الكود |
|---|---|
| الازرق | cyan |
| الأحمر | red |
| الاخضر | green |
| الذهبي | amber |
| الرجواني | purple |
| النيلي | indigo |
| البترولي | teal |
إضافة تاثيرات الى الأزرار
لإضافة التاثيرات الى الازرار يجب اضافة هذا الكلاسليصبح الكود الخاص بالزر على هذا الشكل
يتوفر في الإضافة اربعة تأثيرات مختلفة وهي كالتالي
| التأثير | الكود |
|---|---|
| التفاف | flip |
| دوران | rotate |
| الضغط | rubber |
| الاهتزاز | shake |
إضافة صورة كخلفية للزر
لإضافة هذه الميزة علينا اضافة الستايلليصبح الكود الخاص بالزر على هذا الشكل
<a class="ither1btn daicon-download" style="background-image: url(img.png)" href="رابط هنا">نص هنا</a>
تغيير حجم الزر
يتم تغيير حجم الزر عن طريق هذا الكلاسليصبح الكود بهذا الشكل
<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>
مـعـاينة الإضـافــة
الى هنا أكون قد وصلت لنهاية المقال , أتمنى ان اكون قد وفقت في طرحه,إن أعجبكم لا تترددو بمشاركته مع اصدقائكم وترك تعليق لنا و إن كانت لديكم أي استفسارات أيضا اتمنى طرحها في التعليقات .
دمتم في أمان الله وحفظه
CSS
Share This :
comment 0 Comments
more_vert