كيفية إنشاء أزرار UI كيت

موضوع الأسبوع السادس من تحدي الترميز الأسبوعي هو:

وصفت

"الزر؟ "قد تسأل ... نعم! الزر!

"لكن لماذا؟"

لأن الزر هو أحد اللبنات الأساسية لأي تطبيق ويب / موقع ويب. سواء كنت على Facebook أو Twitter أو Google ، وما إلى ذلك ، ستجد دائمًا زرًا يتيح لك التفاعل مع التطبيق بطريقة ما. لذا سنبني هذا الأسبوع أزرارًا - الكثير من الأزرار!

إذا كنت ترغب في المشاركة في Challenge ، فلا تتردد في إنشاء أي نوع من الأزرار: أزرار ثلاثية الأبعاد ، وأزرار ذات تأثير تموج ، وأزرار متحركة ، وما إلى ذلك - السماء هي الحد الأقصى. كن مبدعا! أنت تعرف كم أقدر الإبداع!

سنقوم في هذه المقالة ببناء أزرار متعددة ووضعها جميعًا في مجموعة أزرار واجهة المستخدم:

قبل الانتقال إلى جزء التنفيذ ، دعونا نرى الحالات المختلفة التي يمكن أن يكون فيها الزر:

  1. الحالة الافتراضية
  2. تحوم الدولة - عندما يكون الماوس فوق الزر
  3. الحالة النشطة - عند الضغط على الزر
  4. حالة التركيز - عند تمييز الزر. مسموح به على العناصر التي تقبل أحداث لوحة المفاتيح. يستخدم هذا لإعطاء المستخدمين الذين يستخدمون لوحة المفاتيح بعض الإرشادات فقط أثناء اجتيازهم للتطبيق.
  5. حالة المعوقين

نحن بحاجة إلى تصميم الأزرار لتغطية كل هذه الحالات.

أيضًا ، سيكون لدينا ثلاثة أنواع مختلفة من الأزرار: الأساسي والثانوي والثالث واثنين من الأحجام الإضافية: الكبيرة والصغيرة.

HTML

نحن نستخدم الطبقات للتمييز بين أنواع الأزرار المختلفة.

المغلق

.btn هي الفئة الرئيسية المستخدمة من قبل جميع الأزرار لدينا:

️ بعض التصميم العام لجعلها تبدو أفضل من الإصدار الافتراضي.

بعد ذلك ، لدينا حالات مختلفة:

من أجل الحصول على بعض الفرق بين الولايات ، يمكننا اللعب مع خاصية العتامة.

في البداية ، يكون للشفافية عتامة: 1 ونقوم بتقليل هذه العتامة قليلاً عندما نمرر فوق الزر ثم أكثر قليلاً عند تعطيل الزر. عندما نقر على الزر ، فإننا سنعيد التعتيم إلى 1 لأنه يعطي تأثيرًا رائعًا.

بالنسبة لحالة التركيز ، نزيل خاصية المخطط التفصيلي الافتراضية وسنضيف خاصية ظل المربع بدلاً من ذلك ، لكننا سنقوم بذلك بشكل منفصل لكل نوع زر لأن اللون يتغير اعتمادًا على الفئة (انظر أدناه).

يتم تعيين الألوان الفردية إلى فئات .btn الأساسية و. btn-الثانوية و .btn-tertiary:

كما ترى ، نستخدم طريقة متغيرات CSS لتعيين اللون نفسه على خصائص مختلفة. ولكن لكي ينجح هذا ، نحتاج إلى إعلان متغيرات اللون على: root كما يلي:

لاحظ أنه من الممارسات الجيدة إضافة: إعلان الجذر في الجزء العلوي من ملف css.

أخيرًا ، دعنا نضيف الحجمين الإضافيين ؛ فصول كبيرة .btn و .btn صغيرة:

خاتمة

تعرف على مدى سهولة إنشاء مجموعة أزرار واجهة المستخدم؟

كميزات إضافية ، يمكنك إضافة تأثير تموج للأزرار عبر JavaScript. لقد فعلت ذلك في مقال سابق - يمكنك التحقق من ذلك من خلال النقر هنا!

آمل أن تكونوا قد أحببت هذا التحدي ولا يمكنني الانتظار لمعرفة ما ستقوم بإنشائه!

ترميز سعيد!

نشرت أصلا على www.florin-pop.com.