ปุ่ม
ด้วย W3.CSS, องค์ประกอบ HTML ทุกคนสามารถเป็นปุ่ม
แต่องค์ประกอบที่พบมากที่สุดคือ <input>, <> ปุ่มและ <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>
ลองตัวเอง» ปุ่มเต็มความกว้าง
เพื่อสร้างปุ่มเต็มความกว้างเพิ่มระดับ W3-btn-บล็อกองค์ประกอบ
ปุ่มเต็มความกว้างมีความกว้างของ 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> ลองตัวเอง» กลุ่มปุ่ม
ปุ่มสามารถรวมกลุ่มกัน (ไม่ต้องเว้นวรรคระหว่าง) โดยใช้ "W3-btn-กลุ่ม":
ตัวอย่าง
<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 องค์ประกอบทุกคนสามารถเป็นปุ่ม
ภาพที่สามารถเป็นปุ่ม
ใด ๆ div ส่วนหัวท้ายหรือภาชนะอื่น ๆ สามารถเป็นปุ่ม
ลอยปุ่ม
W3-btn ลอยชั้นสร้างปุ่มวงกลมที่มีความหมายสำหรับฟังก์ชั่นที่สำคัญ:
ตัวอย่าง
<a class="w3-btn-floating w3-teal">+</a>
<a
class="w3-btn-floating w3-disabled">+</a>
ลองตัวเอง» ใช้ W3-btn ลอยขนาดใหญ่ชั้นลอยสำหรับปุ่มขนาดใหญ่:
ตัวอย่าง
<a class="w3-btn-floating-large w3-teal">+</a>
<a
class="w3-btn-floating-large w3-disabled">+</a>
ลองตัวเอง»