CSS ปุ่ม

ในส่วนนี้เราแนะนำการใช้ CSS ในการสร้างปุ่ม

รูปแบบพื้นฐานปุ่ม

เริ่มต้นปุ่ม CSS

ปุ่มสี

เราสามารถใช้ background-color คุณสมบัติการตั้งค่าสีปุ่ม:

ปุ่มขนาด

เราสามารถใช้ font-size คุณสมบัติการกำหนดขนาดของปุ่ม:

ปุ่มโค้งมน

เราสามารถใช้ border-radius คุณสมบัติการตั้งค่าปุ่มเนื้อ:

สีปุ่มชายแดน

เราสามารถใช้ border ทรัพย์สินของสีปุ่มชายแดน:

เลื่อนปุ่ม

เราสามารถใช้ :hover เลือกที่จะปรับเปลี่ยนรูปแบบได้โดยการวางเหนือปุ่ม

เคล็ดลับ: เราสามารถใช้ transition-duration ของสถานที่ตั้ง "โฉบ" ความเร็วผล:

เงาปุ่ม

เราสามารถใช้ box-shadow คุณสมบัติการเพิ่มเงาให้กับปุ่มนี้:

ปุ่มปิดการใช้งาน

เราสามารถใช้ opacity คุณสมบัติในการเพิ่มความโปร่งใส (ลักษณะคล้ายกับ "คนพิการ" แอตทริบิวต์ผลกระทบ) สำหรับปุ่ม

เคล็ดลับ: สิ่งที่ฉันสามารถเพิ่ม cursor ทรัพย์สินและการตั้งค่าเป็น "ไม่อนุญาต" การตั้งค่าภาพปิดใช้งาน:

ความกว้างของปุ่ม

โดยค่าเริ่มต้นขนาดของข้อความปุ่มบนปุ่มได้ตัดสินใจ (ขึ้นอยู่กับระยะเวลาในการจับคู่ข้อความ) เราสามารถใช้ width คุณสมบัติการกำหนดความกว้างของปุ่ม:

เคล็ดลับ: หากคุณต้องการตั้งค่าความกว้างคงสามารถใช้พิกเซล (พิกเซล) เป็นหน่วยถ้าคุณต้องการตั้งค่าปุ่มตอบสนองสามารถตั้งค่าเป็นเปอร์เซ็นต์

กลุ่มปุ่ม

นำออกจากด้านนอกและเพิ่ม float:left ชุดของปุ่ม:

ที่มีเส้นขอบกลุ่มปุ่ม

เราสามารถใช้ border คุณสมบัติการตั้งกลุ่มปุ่มที่มีพรมแดน:

ปุ่มนิเมชั่น