ปุ่มเป็นส่วนพื้นฐานของ HTML ที่ทำงานต่างๆ ด้วยการใช้ CSS คุณสามารถออกแบบและจัดรูปแบบปุ่มได้ การออกแบบปุ่มมีหลายวิธี เช่น การระบายสีปุ่ม การปรับขนาด การโฮเวอร์ และอื่นๆ อีกมากมาย

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

มาเริ่มกันเลย!

จะเปลี่ยนสีปุ่มบนโฮเวอร์ใน CSS ได้อย่างไร

ใน CSS “ :โฮเวอร์ ” ใช้เพื่อเปลี่ยนสีของปุ่มเมื่อวางเมาส์เหนือ “ :โฮเวอร์ ” เป็นคลาสหลอกที่ช่วยให้เปลี่ยนพฤติกรรมขององค์ประกอบ HTML เมื่อวางเมาส์เหนือองค์ประกอบ เช่น องค์ประกอบ เช่น ลิงก์ ปุ่ม รูปภาพ และอื่นๆ อีกมากมาย

ไวยากรณ์ของ :โฮเวอร์ มีให้ด้านล่าง

ไวยากรณ์

ในไวยากรณ์ที่ให้ไว้ข้างต้น “ เอ ” หมายถึงองค์ประกอบ HTML ที่ “ :โฮเวอร์ ” ถูกนำไปใช้ ใน CSS คุณสามารถตั้งค่าลักษณะการทำงานโฮเวอร์ขององค์ประกอบ HTML เช่น สี ขนาด และความกว้างขององค์ประกอบ

ขั้นตอนที่ 1: สร้าง Div และ Button

ใน HTML อันดับแรก เราจะสร้าง div และเพิ่มหัวข้อด้วย

และปุ่มโดยใช้แท็ก ที่นี่เราจะกำหนดชื่อคลาสของปุ่มเป็น “ btn ” และข้อความปุ่มเป็น “ วางเมาส์เหนือฉัน ”

HTML

ผลลัพธ์ของรหัสที่กล่าวถึงข้างต้นได้รับด้านล่าง คุณจะเห็นว่าหัวเรื่องและปุ่มถูกสร้างขึ้น:

ตอนนี้ ย้ายไปที่ CSS เพื่อจัดรูปแบบ div และปุ่มทีละรายการ

ขั้นตอนที่ 2: ปุ่มสไตล์และ Div

ขั้นแรก เราจะกำหนดสไตล์คอนเทนเนอร์ที่สร้างขึ้นโดยใช้ “ div ” จากนั้นเราจะกำหนดความสูงของ div เป็น “ 250px ” และสีพื้นหลังเป็น “ rgb(199, 173, 192) ” เราจะใช้คุณสมบัติ border เพื่อปรับเส้นขอบของ div, width เป็น “ 5px ” สไตล์เป็น “ แข็ง ” และสีเป็น “ rgb(40, 2, 55) ”

CSS

เอาต์พุตที่ระบุด้านล่างระบุว่ารูปแบบที่เพิ่มนั้นใช้กับ div ได้สำเร็จ:

ในขั้นตอนต่อไป เราจะจัดรูปแบบปุ่มโดยใช้ CSS

ตอนนี้เราจะจัดรูปแบบปุ่มโดยใช้ “ .btn ” เพื่อเข้าถึงปุ่มที่สร้างขึ้นใน HTML หลังจากนั้นเราจะซ่อนขอบของปุ่มโดยตั้งค่า “ ไม่มี ” เป็นค่าคุณสมบัติชายแดน หลังจากนั้นเราจะปรับขนาดตัวอักษรเป็น “ ใหญ่ ” และ padding ของปุ่มเป็น “ 10px ” เพื่อสร้างช่องว่างระหว่างเนื้อหาของปุ่มและเส้นขอบของปุ่ม สุดท้ายเราจะกำหนดสีของข้อความและพื้นหลังเป็น “ rgb(50, 0, 54) ' และ ' rgb(193, 54, 135) ”:

ปุ่มนี้มีสไตล์ขึ้นแล้ว:

นอกจากนี้ เราจะสมัคร “ :โฮเวอร์ ” เพื่อเปลี่ยนสีของปุ่มเมื่อวางเมาส์เหนือ

ขั้นตอนที่ 3: เปลี่ยนสีปุ่มบน Hover

ตอนนี้เราจะใช้ “ .btn:โฮเวอร์ ” เพื่อเชื่อมโยงปุ่มกับองค์ประกอบ hover pseudo-class ด้วยเหตุนี้ โฮเวอร์จะถูกนำไปใช้กับปุ่ม ต่อไปเราจะกำหนดสีพื้นหลังและสีข้อความของปุ่มเป็น “ rgb(66, 2, 41) ' และ ' rgb(119, 255, 0) ” สีเหล่านี้จะถูกนำไปใช้กับปุ่มเมื่อวางเมาส์ไว้:

ในผลลัพธ์ด้านล่าง คุณจะเห็นว่าสีของปุ่มเปลี่ยนไปเมื่อวางเมาส์ไว้บนปุ่มนั้น:

แค่นั้นแหละ! เราได้อธิบายวิธีการเปลี่ยนสีปุ่มบนโฮเวอร์โดยใช้ CSS

บทสรุป

ในการเปลี่ยนสีของปุ่มบนโฮเวอร์ “ :โฮเวอร์ ใช้องค์ประกอบระดับหลอก ในการทำเช่นนั้น ให้เชื่อมโยงปุ่มด้วย :hover และกำหนดสีของปุ่ม ซึ่งจะเปลี่ยนไปเมื่อเราวางเมาส์ไว้บนปุ่มนั้น ในบทความนี้ เราได้อธิบายวิธีการเปลี่ยนสีของปุ่มบนโฮเวอร์และให้ตัวอย่าง