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

نص CSS لتصميم الزر

#submit {background-colour: #bbb؛ الحشو: -Moz-border-radius: 5px ؛ -Wkkit-border-radius: 5px؛ دائرة نصف قطرها الحدود: 6px ؛ اللون: # ff؛ font-family: 'Oswald'؛ حجم الخط: 20 بكسل ؛ زخرفة النص: لا شيء ؛ الحدود: لا شيء ؛ } # تقديم: hover {border: none؛ الخلفية: برتقالي. box-shadow: 0px 0px 1px # 777؛ }

كود HTML لإنشاء الزر

بعد إضافة CSS إلى الصفحة ، يمكن تطبيق CSS على أي زر باستخدام الرمز في HTML.

مثال زر

مثال على زر تم إنشاؤه بواسطة CSS

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