W3.CSS ခလုတ် များ
W3.CSS ခလုတ်အတန်းများ
W3.CSS သည် ခလုတ်များအတွက် အောက်ပါအတန်းများကို ပံ့ပိုးပေးသည်-
| အတန်း | သတ်မှတ်ပါတယ်။ |
|---|---|
| w3-btn | အရိပ်ကို ရွှေ့သည့်အကျိုးသက်ရောက်မှုပါရှိသော စတုဂံခလုတ်။ မူရင်းအရောင်မှာ အနက်ရောင်ဖြစ်သည်။ |
| w3-ခလုတ် |
မီးခိုးရောင် ပြေးလွှားသည့်အကျိုးသက်ရောက်မှုရှိသော စတုဂံခလုတ်။ ပုံသေအရောင်သည် W3.CSS ဗားရှင်း 3 တွင် မီးခိုးရောင်ဖျော့ဖျော့ဖြစ်သည်။ မူရင်းအရောင်သည် ဗားရှင်း 4 ရှိ ပင်မဒြပ်စင်ထံမှ အမွေဆက်ခံပါသည်။ |
| w3-ဘား |
ခလုတ်များကို အတူတကွ အုပ်စုဖွဲ့ရန် အသုံးပြုနိုင်သည့် အလျားလိုက်ဘားတစ်ခု။ (အလျားလိုက် လမ်းကြောင်းပြမီနူးများအတွက် ပြီးပြည့်စုံသည်) |
| w3-block | အကျယ်ကို အပြည့်အစုံသတ်မှတ်ရန် (100%) ခလုတ်ကို အသုံးပြုနိုင်သည့် အတန်း။ |
| w3-စက်ဝိုင်း | စက်ဝိုင်းခလုတ်ကို သတ်မှတ်ရန် အသုံးပြုနိုင်သည်။ |
| w3-လှိုင်းပုတ်သည်။ | ripple effect ဖန်တီးရန် အသုံးပြုနိုင်သည်။ |
ခလုတ်များ
w3-button အတန်းနှင့် w3-btn အတန်း နှစ်ခုစလုံးသည် HTML အစိတ်အပိုင်းများအတွက် ခလုတ်-အပြုအမူကို ပေါင်းထည့်သည်။
အသုံးအများဆုံးဒြပ်စင်များမှာ <input type="button">၊ <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>
အရောင်များကို ရွှေ့ပါ။
Hover အထူးပြုလုပ်ချက်များသည်လည်း အရောင်အားလုံးတွင်ပါရှိပါသည်။ ဤအရာများမှာ-
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- အဝိုင်း- အရွယ်အစား အတန်းများကို ခလုတ်များသို့ ဝိုင်းဝိုင်းဘောင်များထည့်ရန် အသုံးပြုသည်-
ဥပမာ
<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 class ကို သုံးနိုင်သည်။
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-အဝိုင်း- အရွယ်အစား အတန်းကို ထည့်ပါ။
မတူညီသော စာသားအကျိုးသက်ရောက်မှုများပါရှိသော ခလုတ်များ
ခလုတ်များသည် ပိုမိုကျယ်ပြန့်သော စာသားအကျိုးသက်ရောက်မှုများကို အသုံးပြုနိုင်သည်။
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>
Padding ပါသော ခလုတ်များ
w3-padding- အရွယ်အစား အတန်းများကို ခလုတ်စာသားတစ်ဝိုက်တွင် အပို 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>
အကျယ်အဝန်း ခလုတ်များ
full-width ခလုတ်ကို ဖန်တီးရန် w3-block class ကို ခလုတ်တွင် ထည့်ပါ။
full-width ခလုတ်များသည် အကျယ် 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 အတန်းနှင့် ချိန်ညှိပါ။
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-disabled class ကို disabled ခလုတ်တစ်ခုဖန်တီးရန်အသုံးပြုသည် (ဒြပ်စင်သည် standard HTML disabled attribute ကိုပံ့ပိုးပါက၊ disabled attribute ကိုသုံးနိုင်သည်။)
ဥပမာ
<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 class ကို အသုံးပြု၍ ၎င်းတို့ကြားတွင် နေရာလွတ်မရှိဘဲ ခလုတ်များကို အုပ်စုဖွဲ့နိုင်သည် -
ဥပမာ
<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-center class ကို အသုံးပြု၍ ခလုတ်များဘားများကို ဗဟိုပြုနိုင်သည် ။
ဥပမာ
<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- ဘယ် အတန်းနှင့် .w3-ညာဘက် အတန်းကို အသုံးပြု ပါ-
"ယခင်/နောက်တစ်ခု" ခလုတ်များကို ဖန်တီးရန် အသုံးပြုသည်-
ဥပမာ
<div class="w3-bar">
<button class="w3-button w3-left">Left</button>
<button class="w3-button w3-right">Right</button>
</div>
Ripple Effects ပါသော ခလုတ်များ
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>