How to add a button to an image with CSS?
CSS provides various ways to customize the webpage. Like adding a button to an image. In this tutorial, we will learn about the CSS property to do so.
Button on Image
To add a button to an image, first, take a <div> element and use position: relative property to it. Set the width of the container and add an image with width: 100% so that the image covers the whole container.
Now add a <button> with position: absolute to place it over the image. You can add other properties to customize the button.
Example: Adding a button on the image
Here is a small example to add a button on the image with CSS.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 40%;
border: 2px solid blue;
}
img {
width: 100%;
}
button{
position: absolute;
padding: 16px;
background-color: green;
border-radius: 16px;
bottom: 10px;
left: 200px;
width: 100px;
}
</style>
</head>
<body>
<h2>Button on image </h2>
<div class="container ">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1628768887-101156.png" alt="img">
<button>Click Here </button>
</div>
</body>
</html>
Output
Here is the output of the above code.
Example: Button on the image using the background-image property
In the next example, we have added an image to the background and a button to the foreground. Here is an example to illustrate it.
Conclusion
In this tutorial, we have learned to add a button to an image. We can either use the position property to do so or use a background image and button at the front end.
