ใช้ :active pseudo-class ร่วมกับ transform: translateY() และ box-shadow เพื่อสร้างเอฟเฟกต์กดปุ่ม
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> .button { background-color: orange; color: white; border: none; border-radius: 7px; box-shadow: 0 5px #999; display: inline-block; padding: 10px; font-size: 16px; cursor: pointer; text-align: center; outline: none; } .button:hover { background-color: blue; } .button:active { background-color: orange; box-shadow: 0 5px gray; transform: translateY(2px); } </style> </head> <body> <button class = "button">Result</button> </body> </html>
