أزرار W3.CSS
فئات زر W3.CSS
يوفر W3.CSS الفئات التالية للأزرار:
| فصل | يعرّف |
|---|---|
| W3-BTN | زر مستطيل به تأثير تحوم في الظل. اللون الافتراضي هو الأسود. |
| زر w3 |
زر مستطيل مع تأثير التمرير الرمادي. اللون الافتراضي هو الرمادي الفاتح في W3.CSS الإصدار 3. اللون الافتراضي موروث من العنصر الأصل في الإصدار 4. |
| w3- بار |
شريط أفقي يمكن استخدامه لتجميع الأزرار معًا. (مثالي لقوائم التنقل الأفقية) |
| w3 بلوك | فئة يمكن استخدامها لتحديد زر العرض الكامل (100٪). |
| W3- دائرة | يمكن استخدامه لتحديد زر دائري. |
| w3- تموج | يمكن استخدامها لخلق تأثير مضاعف. |
أزرار
تضيف كل من فئة الزر w3 وفئة w3-btn سلوك الزر إلى أي عناصر HTML.
العناصر الأكثر شيوعًا للاستخدام هي <input type = "button"> و <زر> و <a>:
مثال
<input class="w3-button w3-black" type="button" value="Input Button">
<button class="w3-button w3-black">Button Button</button>
<a href="https://www.w3schools.com" class="w3-button w3-black">Link Button</a>
<input class="w3-btn w3-black" type="button" value="Input Button">
<button class="w3-btn w3-black">Button Button</button>
<a href="https://www.w3schools.com" class="w3-btn w3-black">Link Button</a>
ألوان الزر
تُستخدم جميع فئات الألوان w3- لإضافة لون إلى الأزرار:
مثال
<button class="w3-button w3-black">Black</button>
<button class="w3-button w3-khaki">Khaki</button>
<button class="w3-button w3-yellow">Yellow</button>
<button class="w3-button w3-red">Red</button>
<button class="w3-button w3-purple">Purple</button>
تحوم الألوان
تأتي تأثيرات التمرير أيضًا بجميع الألوان. هنا بعض:
تُستخدم فئات الألوان w3-hover- لإضافة لون التمرير إلى الأزرار:
مثال
<button class="w3-button w3-hover-black">Black</button>
<button class="w3-button w3-hover-red">Red</button>
<button class="w3-button w3-hover-purple">Purple</button>
أشكال الأزرار
تُستخدم فئات w3-round- الحجم لإضافة حدود مستديرة للأزرار:
مثال
<button class="w3-button w3-round">Round</button>
<button class="w3-button w3-round-large">Rounder</button>
<button class="w3-button w3-round-xlarge">and Rounder</button>
<button class="w3-button w3-round-xxlarge">and Rounder</button>
<button class="w3-btn w3-round">Round</button>
<button class="w3-btn w3-round-large">Rounder</button>
<button class="w3-btn w3-round-xlarge">and Rounder</button>
<button class="w3-btn w3-round-xxlarge">and Rounder</button>
أحجام الأزرار
يمكن استخدام فئات w3- الحجم لتحديد أحجام مختلفة للنص:
مثال
<button class="w3-button w3-tiny">Tiny</button>
<button class="w3-button w3-small">Small</button>
<button class="w3-button w3-medium">Medium</button>
<button class="w3-button w3-large">Large</button>
<button class="w3-button w3-xlarge">xLarge</button>
<button class="w3-button w3-xxlarge">XXLarge</button>
<button class="w3-button w3-xxxlarge">XXXLarge</button>
<button class="w3-button w3-jumbo">Jumbo</button>
حدود الزر
يمكن استخدام فئة w3-border لإضافة حدود للأزرار.
تُستخدم فئات ألوان w3-border- لتحديد لون الحد:
مثال
<button class="w3-button w3-white w3-border">Button</button>
<button class="w3-button w3-white w3-border w3-border-blue">Button</button>
<button class="w3-button w3-yellow w3-border">Button</button>
<button class="w3-button w3-white w3-border w3-border-red w3-round-large">Button</button>
نصيحة: أضف فئة الحجم w3-round- لإضافة حدود مستديرة.
أزرار ذات تأثيرات نصية مختلفة
يمكن أن تستخدم الأزرار تأثيرات نصية أوسع:
تضيف فئة w3-wide تأثير نص أوسع:
مثال
<button class="w3-button">Normal</button>
<button class="w3-button w3-wide">Wide</button>
يمكن أن تحتوي الأزرار على تأثيرات نصية مائلة وغامقة:
استخدم علامات HTML القياسية (<i> و <b>) لإضافة تأثير مائل أو غامق إلى نص الزر:
مثال
<button class="w3-button"><i>Italic</i></button>
<button class="w3-button"><b>Bold</b></button>
أزرار مع الحشو
تُستخدم فئات حجم w3-padding- لإضافة حشوة إضافية حول نص الزر:
مثال
<button class="w3-button w3-padding-small">Button</button>
<button class="w3-button">Button</button>
<button class="w3-button w3-padding-large">Button</button>
<button class="w3-btn w3-padding-small">Button</button>
<button class="w3-btn">Button</button>
<button class="w3-btn w3-padding-large">Button</button>
أزرار كاملة العرض
لإنشاء زر كامل العرض ، أضف فئة w3-block إلى الزر.
يبلغ عرض الأزرار ذات العرض الكامل 100٪ ، وتمتد عبر العرض الكامل للعنصر الأصل:
مثال
<button class="w3-button w3-block">Button</button>
<button class="w3-button w3-block w3-teal">Button</button>
<button class="w3-button w3-block w3-red w3-left-align">Button</button>
<button class="w3-btn w3-block">Button</button>
<button class="w3-btn w3-block w3-teal">Button</button>
<button class="w3-btn w3-block w3-red w3-left-align">Button</button>
نصيحة: قم بمحاذاة نص الزر مع فئة w3-left-align أو فئة w3-right-align class.
يمكن تحديد حجم الكتلة باستخدام style = "width:" .
مثال
<button class="w3-button w3-block w3-black"
style="width:30%">Button</button>
<button class="w3-button w3-block w3-teal" style="width:50%">Button</button>
<button class="w3-button w3-block w3-red" style="width:80%">Button</button>
أزرار المعوقين
تبرز الأزرار بتأثير الظل ويتحول المؤشر إلى يد عند التمرير بالماوس فوقها.
الأزرار المعطلة غير شفافة (شبه شفافة) وتعرض "لافتة ممنوع الوقوف":
يتم استخدام فئة w3-selected لإنشاء زر معطل (إذا كان العنصر يدعم سمة HTML المعيارية المعطلة ، فيمكنك استخدام السمة المعطلة بدلاً من ذلك):
مثال
<a class="w3-button w3-disabled" href="https://www.w3schools.com">Link Button</a>
<button class="w3-button" disabled>Button</button>
<input type="button" class="w3-button" value="Button" disabled>
<a class="w3-btn w3-disabled" href="https://www.w3schools.com">Link Button</a>
<button class="w3-btn" disabled>Button</button>
<input type="button" class="w3-btn" value="Button" disabled>
أشرطة الأزرار
يمكن تجميع الأزرار معًا في شريط أفقي باستخدام فئة w3-bar :
مثال
<div class="w3-bar">
<button class="w3-button w3-black">Button</button>
<button class="w3-button w3-teal">Button</button>
<button class="w3-button w3-red">Button</button>
</div>
تم تقديم فئة w3-bar في W3.CSS الإصدار 2.93 / 2.94.
يمكن تجميع الأزرار معًا بدون مسافة بينها باستخدام فئة عنصر w3-bar-item :
مثال
<div class="w3-bar">
<button class="w3-bar-item w3-button w3-black">Button</button>
<button class="w3-bar-item w3-button w3-teal">Button</button>
<button class="w3-bar-item w3-button w3-red">Button</button>
</div>
يمكن توسيط أشرطة الأزرار باستخدام فئة الوسط w3 :
مثال
<div class="w3-center">
<div class="w3-bar">
<button class="w3-button w3-black">Button</button>
<button class="w3-button w3-teal">Button</button>
<button class="w3-button w3-disabled">Button</button>
</div>
</div>
لإظهار شريطين (أو أكثر) من الأزرار على نفس السطر ، أضف فئة w3-show-inline-block :
مثال
<div class="w3-show-inline-block">
<div class="w3-bar">
<button class="w3-btn">Button</button>
<button
class="w3-btn w3-teal">Button</button>
<button class="w3-btn
w3-disabled">Button</button>
</div>
</div>
<div
class="w3-show-inline-block">
<div
class="w3-bar">
<button class="w3-btn">Button</button>
<button
class="w3-btn w3-teal">Button</button>
<button class="w3-btn
w3-disabled">Button</button>
</div>
</div>
أشرطة التنقل
يمكن استخدام أشرطة الأزرار بسهولة كأشرطة تنقل:
مثال
<div class="w3-bar w3-black">
<button class="w3-bar-item
w3-button">Button</button>
<button class="w3-bar-item
w3-button">Button</button>
<button class="w3-bar-item
w3-button">Button</button>
</div>
يمكن تحديد حجم كل عنصر باستخدام style = "width:" :
مثال
<div
class="w3-bar">
<button class="w3-bar-item w3-button"
style="width:33.3%">Button</button>
<button class="w3-bar-item w3-button
w3-teal" style="width:33.3%">Button</button>
<button
class="w3-bar-item w3-button w3-red" style="width:33.3%">Button</button>
</div>
سوف تتعلم المزيد عن التنقل لاحقًا في هذا البرنامج التعليمي.
أزرار اليمين واليسار
استخدم فئة .w3-left والفئة .w3-right لتحريك الأزرار إلى اليسار أو اليمين:
يُستخدم لإنشاء أزرار "السابق / التالي":
مثال
<div class="w3-bar">
<button class="w3-button w3-left">Left</button>
<button class="w3-button w3-right">Right</button>
</div>
أزرار ذات تأثيرات تموج
The w3-ripple class creates a ripple effect on buttons (when they are clicked on):
Example
<button class="w3-button w3-ripple">Button</button>
<button
class="w3-button w3-ripple w3-red">Button</button>
<button class="w3-button
w3-ripple w3-yellow">Button</button>
All Elements Can Be Buttons
With W3.CSS, all elements can be a button:
A picture can be a w3-button
A picture can be a w3-btn
Any div, header, footer or other containers can be a w3-btn!
Circular Buttons
The w3-circle class can be used to create circular buttons:
Example
<button class="w3-button w3-circle w3-black">+</button>
<button class="w3-button w3-circle w3-teal">+</button>
Square buttons:
Example
<button class="w3-button w3-black">+</button>
<button
class="w3-button w3-teal">+</button>