โค้ดต่อไปนี้เป็นการเพิ่ม Button บน Image ด้วย CSS
ตัวอย่าง
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> img{ width: 100%; } div { position: relative; width: 100%; max-width: 400px; } div img { width: 100%; height: auto; } div button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgb(64, 21, 133); color: white; font-size: 20px; padding: 24px 36px; width: 220px; border: none; cursor: pointer; border-radius: 5px; text-align: center; font-weight: bolder; font-family: monospace,sans-serif,serif; } div button:hover { color:yellow; } </style> </head> <body> <h1>Button on Image Example</h1> <div> <img src="https://i.picsum.photos/id/354/400/400.jpg"> <button class="btn">Button</button> </div> </body> </html>ผลลัพธ์
โค้ดข้างต้นจะสร้างผลลัพธ์ดังนี้
เมื่อ Hover บน Button จะเปลี่ยนสีดังนี้
