Set Button on Image with CSS



You can try to run the following code to set button on an image:

Example

Live Demo

<!DOCTYPE html> <html>    <head>       <style>          .box {             position: relative;             width: 100%;             max-width: 250px;          }          .box img {             width: 100%;             height: auto;          }          .box .btn {             position: absolute;             top: 50%;             left: 50%;             transform: translate(-50%, -50%);          }       </style>    </head>    <body>       <div class = "box">          <img src = "https://www.tutorialspoint.com/videotutorials/images/current_affairs_home.jpg" alt = "Current Affairs">          <button class = "btn">Button</button>       </div>    </body> </html>
Updated on: 2020-06-24T14:08:35+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements