CSS زر

هذا القسم، ونحن نقدم استخدام CSS لإنشاء زر.

زر الأساسي ستايل

أمثلة CSS

.button {
لون الخلفية: # 4CAF50؛ / * * أخضر /
الحدود: لا شيء؛
اللون: أبيض؛
الحشو: 15px 32px؛
مواءمة النصوص: المركز؛
النص الديكور: لا شيء؛
عرض: مضمنة كتلة.
FONT-SIZE: 16px؛
}

محاولة »

لون الزر

أزرق أحمر أسود رمادي

يمكننا استخدام background-color الملكية لتعيين لون الزر:

أمثلة CSS

.button1 {لون الخلفية: # 4CAF50؛} / * * أخضر /
.button2 {لون الخلفية: # 008CBA؛} / * الأزرق * /
.button3 {لون الخلفية: # f44336؛} / * الأحمر * /
.button4 {لون الخلفية: # e7e7e7؛ اللون: أسود؛} / * رمادي * /
.button5 {لون الخلفية: # 555555؛} / * أسود * /

محاولة »

زر الحجم

12px 16px 20px 24px

يمكننا استخدام font-size الملكية لضبط حجم الزر:

أمثلة CSS

.button1 {FONT-SIZE: 10px؛}
.button2 {FONT-SIZE: 12px؛}
.button3 {FONT-SIZE: 16px؛}
.button4 {FONT-SIZE: 20px؛}
.button5 {FONT-SIZE: 24px؛}

محاولة »

زر مستدير

4PX 8px 12px 50٪

يمكننا استخدام border-radius الملكية لتعيين زر فيليه:

أمثلة CSS

.button1 {الحدود بين دائرة نصف قطرها: 2px؛}
.button2 {الحدود بين دائرة نصف قطرها: 4PX؛}
.button3 {الحدود بين دائرة نصف قطرها: 8px؛}
.button4 {الحدود بين دائرة نصف قطرها: 12px؛}
.button5 {الحدود بين دائرة نصف قطرها: 50٪؛}

محاولة »

اللون الحدود زر

يمكننا استخدام border خاصية اللون الحدود زر:

أمثلة CSS

.button1 {
لون الخلفية: أبيض؛
اللون: أسود؛
الحدود: 2px الصلبة # 4CAF50؛ / * * أخضر /
}
...

محاولة »

تحوم زر

يمكننا استخدام :hover محدد لتعديل نمط من تحوم فوق الزر.

نصيحة: يمكننا استخدام transition-duration الملكية تعيين "تحوم" سرعة التنفيذ:

أمثلة CSS

.button {
-webkit الانتقالية المدة: 0.4s؛ / * سفاري * /
الانتقال المدة: 0.4s.
}

.button: تحوم {
لون الخلفية: # 4CAF50؛ / * * أخضر /
اللون: أبيض؛
}
...

محاولة »

زر الظل

يمكننا استخدام box-shadow الملكية لإضافة الظل إلى الزر:

أمثلة CSS

.button1 {
مربع الظل: 0 8px 16px 0 رغبا (0،0،0،0.2)، 0 6px 20px 0 رغبا (0،0،0،0.19)؛
}

.button2: تحوم {
مربع الظل: 0 12px 16px 0 رغبا (0،0،0،0.24)، 0 17px 50px 0 رغبا (0،0،0،0.19)؛
}

محاولة »