تخفیف ویژه ماه مبارک رمضان، فرصت یادگیری با 35٪ تخفیف (کد تخفیف: ramazan)

سبد خرید (0)

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


+ + +

کلاس های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  متن را ضخیم می کند

مثال

<button class="w3-btn w3-slim">Slim</button>
<button class="w3-btn w3-wide">Wide</button>
خودتان امتحان کنيد »

دکمه ها میتوانند افکت متن   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>
خودتان امتحان کنيد »

همه عناصر میتوانند دکمه شوند.

با  W3.CSS,همه عناصر میتوانند دکمه شوند :

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

 

هر div,header,footer یا دیگر نگهدارنده ها نیز میتوانند یک دکمه باشند!


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

کلاس  w3-btn-floatingبرای ایجاد دکمه های دایره ای شناور استفاده میشوند :

+ +

مثال

<a class="w3-btn-floating">+</a>
<a class="w3-btn-floating w3-teal">+</a>
خودتان امتحان کنيد »

کلاس w3-btn-floating-large برای ایجاد دکمه های بزرگ دایره ای شناور استفاده میشوند :

+ +

مثال

<a class="w3-btn-floating-large">+</a>
<a class="w3-btn-floating-large w3-teal">+</a>
خودتان امتحان کنيد »