วิธีการ - ปุ่มเต็มความกว้าง (บล็อก)
เรียนรู้วิธีกำหนดสไตล์ปุ่มบล็อก (เต็มความกว้าง) ด้วย CSS
วิธีการสไตล์บล็อกปุ่ม
ขั้นตอนที่ 1) เพิ่ม HTML:
ตัวอย่าง
<button
type="button" class="block">Block Button</button>
ขั้นตอนที่ 2) เพิ่ม CSS:
ในการสร้างปุ่มเต็มความกว้าง ให้เพิ่มความกว้าง 100% และทำให้เป็นองค์ประกอบบล็อก:
ตัวอย่าง
.block {
display: block;
width: 100%;
border: none;
background-color: #04AA6D;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
text-align: center;
}
ไปที่ บทช่วย สอนปุ่ม CSS ของเรา เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการจัดรูปแบบปุ่ม