أزرار CSS: البرامج التعليمية والأمثلة
يعد إنشاء الأزرار باستخدام CSS أحد أساليب تصميم الويب الأكثر تجريبًا. أمثلة ودروس تكثر.
يبدو أن أكبر اتجاه حديث في تصميم زر CSS هو إزالة الصور ، خاصة الصور الخلفية ، من الأزرار. ولكن هناك الكثير من الأشياء الأخرى التي يقوم بها المصممون بأزرار ، بعضها يتضمن الصور.
في ما يلي جمعنا أكثر من 20 برنامجًا تعليميًا وأمثلة وأدوات لإنشاء أزرار CSS ، ومعظمها يستخدم CSS3.
وشملت هي أزرار لتناسب تقريبا كل نمط التصميم. لقد حاولنا التركيز على تقنيات أحدث هنا ، مع ترك التقنيات القديمة (مثل طريقة باب جرار لإنشاء الزوايا الدائرية) التي يعرفها معظم المصممين بالفعل.
إذا كان لديك برامج تعليمية أو أمثلة أخرى ترغب في مشاركتها ، فالرجاء القيام بذلك في التعليقات!
البرامج التعليمية والمقالات
إعادة اكتشاف عنصر الزر
مقالة مفيدة حقا مناقشة button عنصر في CSS ، والذي غالبًا ما يتم تجاهله من قبل المصممين. إنه أقدم قليلاً ، ولكن لا يزال لديه الكثير من المعلومات المفيدة حول إنشاء أزرار أكثر عصرية مع CSS.
أزرار CSS جميلة مع مجموعة الرموز
هنا مقال آخر يتحدث عن كيفية إنشاء الأزرار مع الرموز ، على الرغم من استخدامها span الطبقات بدلا من button جزء.
بناء أزرار CSS3 العملية ركلة الحمار
يوضح هذا الفيديو التعليمي من Nettuts + كيفية إنشاء أزرار CSS3 عملية تتضمن حتى ما يبدو أنه رمز لصورة طائر تويتر ، ولكنه في الحقيقة تم إنشاؤه بالكامل باستخدام CSS3.
أزرار جميلة تشبه فوتوشوب مع CSS3
على الرغم من أن الأزرار هنا لا تفكر بشكل خاص في التفكير ، فإن ما هو مدهش هو أنها تم إنشاؤها بالكامل باستخدام CSS3 ، بدون استخدام الصور ، وكانت تستند فقط على الأزرار التي تم إنشاؤها في Photoshop.
زر أفضل وتفاعلات التنقل
هذا برنامج تعليمي رائع وبسيط من دارين هويت حول إنشاء سلوكيات أفضل لأزرارك التي تشجع الزائرين على التفاعل مع موقعك.
أزرار فائقة رائعة مع CSS3 و RGBA
يغطي هذا البرنامج التعليمي من Zurb استخدام CSS3 ومزج ألفا باستخدام RGBA لإنشاء أزرار قابلة للتحجيم مع صورة PNG واحدة فقط.
بناء أزرار جميلة مع التدرجات CSS
برنامج تعليمي لإنشاء زر باستخدام تدرجات CSS مشابهة لتلك المستخدمة من قبل Mozilla for Firefox Personas.
كيفية تصميم زر مثير باستخدام المغلق
يوضح هذا البرنامج التعليمي كيفية إنشاء زر كبير ونابض بالحياة دون استخدام الصور.
أزرار CSS3 واقعية تبحث
هذه أزرار بسيطة ، تم إنشاؤها بالكامل باستخدام CSS3 ، بما في ذلك بعض العناصر الزائفة.
أزرار CSS3 جميلة
يوضح هذا البرنامج التعليمي كيفية إنشاء زر بسيط ولامع قليلاً وقابل للتحجيم ويمكن إنشاؤه بأي لون بدون صور.
أزرار CSS3 دون أي صور
برنامج تعليمي بسيط لإنشاء أزرار ديناميكية تستخدم CSS3 فقط ولا توجد صور. هناك أربع حالات لكل زر ، بما في ذلك الحالات المعطلة والمموجة والمنبثقة.
5 دروس مختلفة من أزرار الارتباط الديناميكي CSS مستديرة الزوايا
هذه مجموعة من خمسة برامج تعليمية مختلفة لإنشاء أزرار CSS ذات زوايا دائرية. اثنان تشمل استخدام الصور ، ولكن الثلاثة الآخرين لا.
قم بإنشاء زر CSS3 يتحلل بشكل جيد
وإلى أن تدعم جميع المتصفحات CSS3 بشكل صحيح ، سنواجه مشكلات عند استخدامها لإنشاء أشياء مثل الأزرار. يوضح هذا البرنامج التعليمي كيفية إنشاء أزرار CSS3 رائعة تبدو أيضًا جيدة في المتصفحات القديمة ، مثل IE6 و 7.
شريط التنقل في Apple باستخدام CSS فقط
يوضح هذا البرنامج التعليمي كيفية إعادة إنشاء قائمة التنقل على نمط الأزرار على موقع Apple على الويب. تعمل بشكل أفضل في Safari 3 أو أحدث ، ولكنها لا تزال تبدو جيدة في المتصفحات الأخرى.
قم بإنشاء زر عبارة حث على اتخاذ إجراء في CSS3
يوضح هذا البرنامج التعليمي كيفية إنشاء زر للحث على اتخاذ إجراء بالكامل باستخدام CSS يتضمن حالات افتراضية وتحويم مختلفة.
أزرار مثير مع CSS3
يوضح هذا البرنامج التعليمي البسيط كيفية إنشاء أزرار مصممة بشكل جيد مع حالات فريدة وحالات نشطة. يمكن تغيير حجم الأزرار ويمكن تغيير لونها بسهولة.
أزرار مصقولة بدون صور تستخدم CSS3 فقط
بالنظر إلى هذه الأزرار ، من الصعب تصديق أنها مصنوعة بدون صور إلا إذا نظرت عن كثب. الرمز معقد ، ولكن النتيجة النهائية تبدو رائعة وكاملة مع تأثير التمرير.
أزرار CSS3 مع الرموز
يوضح هذا البرنامج التعليمي كيفية إنشاء أزرار CSS3 مع التدرجات التي تتضمن أيضًا صور الرموز ومتوافقة عبر المتصفحات.
قم بتدوير أزرار Google الخاصة بك
يوضح هذا البرنامج التعليمي كيفية إنشاء أزرار قابلة للتحجيم من نمط Google مع حدود ملونة. النتائج النهائية هي الحد الأدنى ونظيفة.
أمثلة والأدوات
10 أزرار CSS3 رائعة لاستخدامها على موقع الويب الخاص بك
إليك مجموعة من عشرة أزرار يمكنك استخدامها على موقع الويب الخاص بك. انهم جميعا بسيطة جدا ولكن يتم إنشاؤها باستخدام CSS3 فقط مع عدم وجود صور.
أزرار التدرج CSS3
هذه مجموعة ضخمة من أزرار CSS3 من Web Designer Wall. وشملت مجموعة متنوعة من الأشكال والأحجام والألوان ، كل ذلك مع التدرجات. ومع ذلك ، فإن أحد أفضل الأجزاء المتعلقة بها هو مدى انخفاض أداء هذه الأزرار في المتصفحات التي ليس لديها دعم كامل من CSS3.
صانع الزر
تقدم CSS-Tricks هذا المبدع المجاني في CSS3. ما عليك سوى تحديد ألوان الخلفية لكل حالة من الأزرار ، والحجم ، والسمات النصية ، وستقوم بإنشاء رمز CSS لك.
أزرار مشعة
تستخدم هذه الأزرار رسومًا متحركة لـ CSS في Safari لإنشاء تأثير متوهج نابض. في المتصفحات الأخرى التي تدعم CSS3 ، فإنها لا تزال تعمل بشكل مثالي وتبدو على ما يرام.
تعرف على أساليب أخرى لإنشاء أزرار CSS رائعة لم يتم ذكرها هنا؟ أو لديك مثال مفضل؟ يرجى حصة لهم في التعليقات!