ความกว้างของปุ่ม CSS แบบค่าคงที่ และแบบ %

สอนเขียนโค้ดกำหนดความกว้างของปุ่ม CSS แบบค่าคงที่โดยใช้หน่วย Pixels (px) และแบบกำหนดเป็น % ด้วยคำสั่ง width ของภาษา CSS และเรียกใช้ผ่าน attribute class ของปุ่ม input button ของภาษา HTML สามารถเขียนคำสั่งได้ดังนี้

ตัวอย่างที่ 1 ความกว้างของปุ่ม CSS แบบค่าคงที่หน่วย Pixels (px)

<style>
    .btn {
        width: 150px;
    }
</style>

<input type="button" value="ปุ่มกด" class="btn">

ตัวอย่างที่ 2 ความกว้างของปุ่ม CSS แบบกำหนดเป็น %

<style>
    .btn {
        width: 80%;
    }
</style>

<input type="button" value="ปุ่มกด" class="btn">

วิธีการกำหนดความกว้างของปุ่ม CSS ตัวอย่างที่ 1 กำหนดแบบค่าคงที่หน่วยเป็น Pixels (px) เขียนโค้ดคือ width: 150px หมายความว่ากำหนดให้ปุ่ม หรือ elements ใดๆ ก็ตามที่นำ class btn นี้ไปใช้งานให้มีขนาดความกว้าง หรือ width 150px ส่วนตัวอย่างที่ 2 คือ width: 80% เป็นการกำหนดความกว้างแบบ % โดยกำหนดให้ปุ่ม หรือ elements ใดๆ ก็ตามที่นำ class btn นี้ไปใช้งานให้มีความกว้างอยู่ที่ 80% ของพื้นที่ที่ปุ่มหรือ elements นั้นๆ อาศัยอยู่