CSSปุ่ม

เรียนรู้วิธีการรูปแบบปุ่มใช้ CSS

จัดแต่งทรงผมพื้นฐานปุ่ม

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

ปุ่มสี

ใช้ background-color คุณสมบัติการเปลี่ยนสีพื้นหลังของปุ่ม:

ขนาดปุ่ม

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

ปุ่มโค้งมน

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

สีพรมแดนปุ่ม

ใช้ border คุณสมบัติการเพิ่มเส้นขอบสีปุ่ม A:

ปุ่ม Hoverable

ใช้ :hover เลือกที่จะเปลี่ยนรูปแบบของปุ่มเมื่อคุณเลื่อนเมาส์มากกว่านั้น

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

ปุ่มเงา

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

ปุ่มสำหรับผู้พิการ

ใช้ opacity คุณสมบัติในการเพิ่มความโปร่งใสให้กับปุ่ม (สร้าง "คนพิการ" มอง)

เคล็ดลับ: นอกจากนี้คุณยังสามารถเพิ่ม cursor ทรัพย์สินที่มีค่า "ที่ไม่ได้รับอนุญาต" ซึ่งจะแสดงเป็น "ไม่มีสัญญาณที่จอดรถ" เมื่อคุณวางเมาส์บนปุ่ม:

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

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

กลุ่มปุ่ม

นำอัตรากำไรขั้นต้นและเพิ่ม float:left ไปแต่ละปุ่มเพื่อสร้างกลุ่มปุ่ม

เป้นกลุ่มปุ่ม

ใช้ border คุณสมบัติการสร้างกลุ่มปุ่มขอบ:

ปุ่มเคลื่อนไหว