لما لا تضيف بعض التنسيق ب css على أزرار موقعك، لتظهر بشكل مختلف قريب من لمسات ويب 2.0
تستطيع انشاء button بعدة طرق
<input type='submit' value='save' class='button' />ومن الضروري ان تضيف Class لهذا الحقل كي لا تظهر باقي الحقول بنفس الشكل
أو باستعمال وسم a ان كان الهدف الانتقال الى صفحة موالية:
<a href='./' class='button'>save</a>
في هذا المثال سنضيف تأثيرات على الزر باستعمال الوسم a
a.button { font:.78em arial padding:.3em 1em; border:1px solid #ddd; color:#999; text-decoration: none; }
إطار قيمته 1px بلون رمادي فاتح، تحديد حجم ونوع الخط وpadding بالشكل الذي أريده، ولم اضع هنا display:block كي لا اكون مضطرا لاستعمال width خصوصا أنني لا اعرف حجم الكلمات التي ساضعها في الرابط، قد تكون عبارة قصيرة وقد تكون جملة مكونة من عدة كلمات مثل
save أو save this page، لذا تحديد العرض هنا سيكون غير مفيد ومضعية للوقت ومزيدا من الاكواد
أستطيع أن اضيف بعض التاثيرات كاطار دائري يظهر على Firefox ( و webkit ان احببت)
a.button { -moz-border-radius: 08px; text-transform: capitalize; }
وعند تقريب زر الفأرة Hover من الرابط سأضيف خلفية وأغير بعض الألوان
a.button:hover { color:#000; background: url(input.png) repeat-x 0 50%; border:1px solid #999 }
وكي أخفي النقط dotted التي تظهر في متصفح Firefox عند الضغط على اي رابط أضيف:
a.button { outline: none; }
درس رائع وحركة جميلة
جزيت خيرا
أفكار جميلة جداً .. شكراً لك :)
أعجبتني سهولتها .. والنصائح الخاصة بتصميم الأزرار
تشكر على المعلومات المفيدة
حسن أحمد:
حياك الله وسعيد ان tips أعجبتك
عمر الدليمي + أزهار قلبي:
لا شكر على واجب
من فترة ابحث عن الطريقة …
شكرا ً
على الرحب والسعة