padding คือการเพิ่มช่องว่าง โดย ค่า รูปแบบการใช้คำสั่ง padding : (px,px,px,px); ซึ่งกำหนด px ตัวแรกคือ กำหนดค่า ซ้าย บน ล่าง ขวา ตามลำดับ
font-size กำหนดขนาดของข้อความ
text-align : center คือการกำหนดตำแหน่งให้ข้อความว่าอยู่ตำแหน่งไหน จากตัวอย่างกำหนดให้อยู่กึ่งกลาง(center)
cursor : pointer คือ การกำหนดให้ว่าเมื่อนำเมาส์ไปวางไว้ที่ปุ่มกด ตัวเมาส์จะเปลี่ยนเป็นรูปนิ้วมือชี้
outline:none คือ การนำ เส้นกรอบเมื่อทำการกดปุ่ม ออก
color: #fff; คือการกำหนดสีให้กับข้อความ
background-color: #4CAF50; ใส่สีพื้นหลังให้กับปุ่ม
border: none; คือกำหนดกรอบให้กับปุ่มกด
border-radius: 15px; คือการกำหนดขอบของปุ่มกดให้โค้ง
box-shadow: 0 9px #999; กำหนดเงาให้แก่ปุ่มกด และสีของเงา
โค้ด: เลือกทั้งหมด
<style>
.button {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
</style>
.button:active {} คือ เมื่อกดปุ่ม
transform: translateY(4px); เมื่อกดปุ่ม ปุ่มจะยุบ
โค้ด: เลือกทั้งหมด
.button:hover {background-color: #3e8e41}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
โค้ด: เลือกทั้งหมด
<button class="button">กดปุ่ม</button>
ก่อนกดปุ่ม
เมื่อเอาเมาส์ไปวาง
เมื่อกดปุ่ม