ปุ่ม W3.CSS
คลาสปุ่ม W3.CSS
W3.CSS มีคลาสต่อไปนี้สำหรับปุ่ม:
| ระดับ | กำหนด |
|---|---|
| w3-btn | ปุ่มสี่เหลี่ยมที่มีเอฟเฟกต์เงาโฮเวอร์ สีเริ่มต้นคือสีดำ |
| w3-ปุ่ม |
ปุ่มสี่เหลี่ยมที่มีเอฟเฟกต์โฮเวอร์สีเทา สีเริ่มต้นคือสีเทาอ่อนใน W3.CSS เวอร์ชัน 3 สีเริ่มต้นจะสืบทอดมาจากองค์ประกอบหลักในเวอร์ชัน 4 |
| w3-bar |
แถบแนวนอนที่สามารถใช้เพื่อจัดกลุ่มปุ่มต่างๆ เข้าด้วยกัน (เหมาะสำหรับเมนูนำทางแนวนอน) |
| w3-บล็อก | คลาสที่สามารถใช้กำหนดปุ่มความกว้างเต็ม (100%) |
| w3-วงกลม | สามารถใช้กำหนดปุ่มวงกลมได้ |
| w3-ระลอกคลื่น | สามารถใช้เพื่อสร้างเอฟเฟกต์ระลอกคลื่น |
ปุ่ม
ทั้ง คลาส ปุ่ม w3และคลาส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>
โฮเวอร์สี
เอฟเฟกต์โฮเวอร์ยังมีทุกสี นี่คือบางส่วน:
คลาส สี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-disabledใช้เพื่อสร้างปุ่มที่ถูกปิดใช้งาน (หากองค์ประกอบรองรับแอตทริบิวต์ที่ถูกปิดใช้งาน 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-center :
ตัวอย่าง
<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>