أحدث البرامج التعليمية وتطوير الشبكة
 

W3.CSS أزرار


أزرار

مع W3.CSS، يمكن لجميع عناصر HTML تكون أزرار.

ولكن العناصر الأكثر شيوعا هي <إدخال>، <زر>، و<A>:

مثال

<input class="w3-btn" value="Input Button">

<button class="w3-btn">Button Button</button>

<a class="w3-btn" href="http://www.w3ii.com">Link Button</a>
انها محاولة لنفسك »

زر الألوان

أزرار تأتي في كل الألوان التي تحتاج إليها:

مثال

<button class="w3-btn w3-khaki">Khaki</button>
<button class="w3-btn w3-yellow">Yellow</button>
<button class="w3-btn w3-orange">Orange</button>
<button class="w3-btn w3-red">Red</button>
<button class="w3-btn w3-purple">Purple</button>
انها محاولة لنفسك »

تحوم الألوان

تحوم آثار تأتي في كل الألوان التي تحتاج إليها:

مثال

<button class="w3-btn w3-hover-khaki">Khaki</button>
<button class="w3-btn w3-hover-white">White</button>
<button class="w3-btn w3-hover-red">Red</button>
<button class="w3-btn w3-hover-purple">Purple</button>
انها محاولة لنفسك »

الأشكال زر

أزرار تأتي في جميع الأشكال التي تحتاج إليها:

مثال

<button class="w3-btn">Normal</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>
انها محاولة لنفسك »

مقاسات زر

أزرار تأتي في جميع الأحجام التي تحتاج إلى:

مثال

<button class="w3-btn w3-tiny">Tiny</button>
<button class="w3-btn w3-small">Small</button>
<button class="w3-btn w3-medium">Medium</button>
<button class="w3-btn w3-large">Large</button>
<button class="w3-btn w3-xlarge">xLarge</button>
انها محاولة لنفسك »

حدود زر

يمكن أزرار لها حدود.



مثال

<button class="w3-btn w3-white w3-border">Button</button>
<button class="w3-btn w3-light-grey w3-border">Button</button>
<button class="w3-btn w3-yellow w3-border">Button</button>
<button class="w3-btn w3-white w3-border w3-round">Round</button>
<button class="w3-btn w3-white w3-border w3-round-large">Round</button>
<button class="w3-btn w3-white w3-border w3-round-xlarge">Round</button>
<button class="w3-btn w3-white w3-border w3-border-blue w3-round">Button</button>
انها محاولة لنفسك »

الأزرار مع تأثيرات النص

يمكن أزرار لها تأثيرات النص مائل وجريئة.

مثال

<button class="w3-btn">Normal</button>
<button class="w3-btn"><i>Italic</i></button>
<button class="w3-btn"><b>Bold</b></button>
انها محاولة لنفسك »

يمكن أزرار لها تأثيرات النص الظل.

مثال

<button class="w3-btn w3-red w3-text-shadow">Shadow</button>
<button class="w3-btn w3-red w3-text-shadow"><i>Shadow</i></button>
<button class="w3-btn w3-red w3-text-shadow"><b>Shadow</b></button>
انها محاولة لنفسك »

يمكن أزرار لها تأثيرات النص ضئيلة واسعة.

مثال

<button class="w3-btn">Normal</button>
<button class="w3-btn w3-slim">Slim</button>
<button class="w3-btn w3-wide">Wide</button>
انها محاولة لنفسك »

أزرار العرض الكامل

لإنشاء زر العرض الكامل، إضافة فئة BTN W3-كتلة إلى عنصر.

أزرار العرض الكامل وبعرض 100٪، وتمتد على كامل عرض العنصر الأصلي:





مثال

<button class="w3-btn-block">Button</button>
<button class="w3-btn-block w3-teal">Button</button>
<button class="w3-btn-block w3-red w3-left-align">Button</button>
انها محاولة لنفسك »

تحوم تأثيرات / أزرار للمعاقين

أزرار تبرز عند الماوس فوقها.

أزرار عادية عرض مؤشر الإصبع.

أزرار للمعاقين معتمة وعرض "لا علامة للسيارات".

مثال

<button class="w3-btn">Button</button>
<button class="w3-btn w3-disabled">Button</button>

<input type="button" class="w3-btn" value="Button">
<input type="button" class="w3-btn" value="Button" disabled>
انها محاولة لنفسك »

المجموعات زر

أزرار يمكن تجميعها معا (بدون الفضاء بين) باستخدام "، BTN W3-مجموعة":


مثال

<div class="w3-btn-group">
  <button class="w3-btn">Button</button>
  <button class="w3-btn w3-teal">Button</button>
  <button class="w3-btn" disabled>Button</button>
</div>

<div class="w3-btn-group">
  <button class="w3-btn w3-light-grey" style="width:33.3%">One</button>
  <button class="w3-btn w3-light-grey" style="width:33.3%">Two</button>
  <button class="w3-btn w3-light-grey" style="width:33.3%">Three</button>
</div>
انها محاولة لنفسك »

أزرار مع تأثيرات متتالية

يمكن أزرار لها نتائج ايجابية عندما يتم النقر أنهم على:

مثال

<button class="w3-btn w3-ripple">Button</button>
<button class="w3-btn w3-ripple w3-red">Button</button>
<button class="w3-btn w3-ripple w3-yellow">Button</button>
انها محاولة لنفسك »

عناصر زر

مع W3.CSS، يمكن لجميع العناصر يكون زر.

صورة يمكن أن يكون زر

أي شعبة، رأس، تذييل أو غيرها من الحاويات يمكن أن يكون زر.


العائمة أزرار

و-BTN W3 العائمة الدرجة، يخلق أزرار دائرية التي تهدف لوظائف هامة:

+ +

مثال

<a class="w3-btn-floating w3-teal">+</a>
<a class="w3-btn-floating w3-disabled">+</a>
انها محاولة لنفسك »

استخدام فئة كبيرة عائمة-BTN W3-لأزرار عائمة كبيرة:

+ +

مثال

<a class="w3-btn-floating-large w3-teal">+</a>
<a class="w3-btn-floating-large w3-disabled">+</a>
انها محاولة لنفسك »