دکمه های واکنشگرا

کلاس هایButton در W3.CSS

w3.CSS کلاس های زیر را برای دکمه ها مهیا میکند :

کلاس	تعریف
w3-btn	دکمه مستطیلی
w3-btn-floating	دکمه دایره ای شناور
w3-btn-floating-large	دکمه بزرگ دایره ای شناور
w3-btn-group	گروه دکمه ها
w3-btn-bar	مجمومه دکمه ها(مانند W3-btn-group عمل میکند و تنها تفاوت آن ها در رنگ پس زمینه و افکت در زمان رفتن موس روی آنهاست)
w3-btn-block	دکمه های تمام عرض (100% width)
w3-ripple	افکت موجی

دکمه ها

کلاس w3-btn به عناصر HTML رفتاری مانند دکمه ها می افزاید.

معمول ترین عناصر <input type="button">, <button>, <a> می باشند :

مثال

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

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

<a class="w3-btn" href="http://www.w3schools.com">Link Button</a>

خودتان امتحان کنيد »

رنگ های دکمه

دکمه ها در تمام رنگ ها وجود دارند. بعضی از آنها در این قسمت آمده است:

کلاس های w3-color برای افزودن رنگ به دکمه ها ،مورد استفاده قرار میگیرند:

مثال

<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>

خودتان امتحان کنيد »

رنگ های Hover

میتوان افکت هایی با انواع رنگها را با رفتن موس روی عناصر ببینم:

کلاس های w3-hover-color برای افزودن رنگ hover روی دکمه ها مورد استفاده قرار میگیرد:

مثال

<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>

خودتان امتحان کنيد »

اشکال دکمه

دکمه ها میتوانند در شکل های متفاوت نمایش داده شوند :

کلاسهای w3-round-size برای افزودن مرزهای دایره ای به دکمه ها مورد استفاده قرار میگیرند:

مثال

<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>

خودتان امتحان کنيد »

اندازه های دکمه

دکمه ها میتوانندبا اندازه متون متفاوتی نمایش داده شوند :

کلاس های w3-size برای تعریف متن روی دکمه ها با سایز های متفاوت مورد استفاده قرار میگرند:

مثال

<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-xxlarge">XXLarge</button>
<button class="w3-btn w3-xxxlarge">XXXLarge</button>
<button class="w3-btn w3-jumbo">Jumbo</button>

خودتان امتحان کنيد »

مرزهای دکمه

دکمه ها نیز میتوانند مرز داشته باشند :

کلاس w3-border برای افزودن مرز به دکمه ها مورد استفاده قرار میگیرد. کلاس های w3-border-color برای تعریف رنگ مرزها مورد استفاده قرار میگیرند:

مثال

<button class="w3-btn w3-white w3-border">Button</button>
<button class="w3-btn w3-yellow w3-border">Button</button>
<button class="w3-btn w3-white w3-border w3-round-large">Button</button>
<button class="w3-btn w3-white w3-border w3-border-blue w3-round-xlarge">Button</button>
<button class="w3-btn w3-white w3-border w3-border-red w3-round-xlarge">Button</button>

خودتان امتحان کنيد »

نکته : کلاس w3-round-size برای افزودن مرزهای گرد به عناصر، به آنها بیفزایید:

دکمه با افکت متفاوت متن

متن دکمه هامی تواند نازک یا ضخیم باشد.

کلاس w3-slim میتواند متن را نازک و w3-wide متن را ضخیم می کند

مثال

خودتان امتحان کنيد »

دکمه ها میتوانند افکت متن italic یا bold داشته باشند:

از تگ های استاندارد (<i>,<b>) برای افزودن افکت bold یا italic به متن دکمه ها، استفاده کنید:

مثال

<button class="w3-btn"><i>Italic</i></button>
<button class="w3-btn"><b>Bold</b></button>

خودتان امتحان کنيد »

دکمه ها همچنین میتوانند افکت سایه متن داشته باشند:

کلاس w3-text-shadow برای افزودن افکت سایه به متن مورد استفاده قرار میگیرد:

مثال

<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>

خودتان امتحان کنيد »

دکمه ها با Padding زیاد

از کلاس های w3-padding-size برای افزودن padding زیاد اطراف متن دکمه، استفاده میشود:

مثال

<button class="w3-btn w3-padding-large">Button</button>
<button class="w3-btn w3-padding-xlarge">Button</button>
<button class="w3-btn w3-padding-xxlarge">Button</button>

خودتان امتحان کنيد »

دکمه های چپ و راست

کلاسهای w3-right و w3-left برای قراردادن دکمه در سمت راست یا چپ استفاده می شوند :

مثال

<div class="w3-clear">
<button class="w3-btn w3-left">Left</button>
<button class="w3-btn w3-right">Right</button>
</div>

خودتان امتحان کنيد »

نکته: برای از بین بردن خاصیت float از کلاسw3-clear استفاده کنید.

دکمه های تمام عرض

برای ایجاد دکمه های تمام عرض از کلاس w3-btn-block استفاده میکنیم .

دکمه های تمام عرض ،عرضی برابر با 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>

خودتان امتحان کنيد »

نکته : متن دکمه ،با کلاس های w3-left-align یا w3-right-align تراز بندی میشود.

دکمه های غیر فعال

دکمه ها با یک افکت سایه نمایش داده میشوند و وقتی موس روی آن میرود cursor تبدیل به شکل دست می شود.

دکمه های غیرفعال مات هستند(شبه شفاف ) و یک نشانه " توقف نکنید" نمایش میدهند.

کلاس w3-disabled برای ایجاد دکمه های غیرفعال استفاده می شود(اگر عنصر از ویژگی استاندارد disabled پشتیبانی کند شما میتوانید به جای کلاس از ویژگی disabled استفاده کنید )

مثال

<a class="w3-btn w3-disabled" href="http://www.w3schools.com">Link Button</a>
<button class="w3-btn" disabled>Button</button>
<input type="button" class="w3-btn" value="Button" disabled>

خودتان امتحان کنيد »

گروه دکمه ها

با کلاس w3-btn-group دکمه ها میتوانند با همدیگر گروه شوند (بدون فاصله بین آنها) :

مثال

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

<div class="w3-btn-group">
<button class="w3-btn" style="width:33.3%">Button</button>
<button class="w3-btn w3-teal" style="width:33.3%">Button</button>
<button class="w3-btn w3-disabled" style="width:33.3%">Button</button>
</div>

خودتان امتحان کنيد »

برای نمایش دو یا بیشتر گروه دکمه روی یک خط ،کلاس w3-show-inline-block را می افزاییم :

مثال

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

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

خودتان امتحان کنيد »

مجموعه دکمه ها

کلاس w3-btn-bar مانند w3-btn-group است با این تفاوت که درون دکمه ها ،رنگ پس زمینه را از عنصر w3-btn-bar به ارث میبرد و یک رنگ پس زمینه خاکستری زمانی که موس روی آن میرود به خود میگیرد:

مثال

<div class="w3-btn-bar w3-border">
<button class="w3-btn">Button</button>
<button class="w3-btn">Button</button>
<button class="w3-btn">Button</button>
</div>

خودتان امتحان کنيد »

دکمه ها با افکت موجی

کلاس w3-ripple یک موج روی دکمه ایجاد میکند (وقتی آنها کلیک می شوند) :

مثال

<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>

خودتان امتحان کنيد »