BUTTON ON IMAGE

Run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
    body, html {
	  height: 100%;
	}
	.container {
	  position: relative;
	  background-image: url("https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627476216-101156.png");
	  background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
	  height: 400px;
	  width: 50%;
	  border: 2px solid blue;
	}
	button{
    position: absolute;
	padding: 10px;
	background-color: rgba(0 , 0,0,0.3);
	border-radius: 16px;
	bottom: 5%;
	left: 40%;
	width: 80px;
  }
  h2 {
     text-align: center;
	 background-color: rgba(256 , 256,256,0.5);
	 font-size: 30px;
  }
  button:hover {
      background-color: blue;
      color: white;
  }

		
</style>
</head>
<body>
   <div class="container">
		<div class=".btn">
			<h2> Button on image </h2>
			<button> Click Here</button>
		</div>
   </div>
</body>
</html>