how make button alignment responsive in css?-CodePudding

I want to place the button at the bottom left side. The alignment should be responsive. Below is my html code:

.third-banner {
  /*background-image: url("banner3.PNG");*/
  background-image: url("banner3new.JPG");
  background-size: 100%;
  background-repeat: no-repeat;
  height: 100%;
  width: 90%;
}

.banner-btn {
  border-radius: 17px;
  color: white;
  margin-top: 600px;
  margin-right: 350px;
  font-size: 23px;
}

.banner-btn:hover {
  background-color: #1492ed;
  border-block-color: #1492ed;
}

<center>
  <div >
    <a href="#" >LEARN MORE</a>
  </div>
</center>

CodePudding user response：

.third-banner {
  background-image: url("https://picsum.photos/id/20/800/600");
  background-size: 100%;
  background-repeat: no-repeat;
  height: 100vh;
  width: 90%;
}

.banner-btn {
  position: absolute;
  bottom: 10px;
  left: 10px;
  border-radius: 17px;
  color: white;
  font-size: 23px;
}

.banner-btn:hover {
  background-color: #1492ed;
  border-block-color: #1492ed;
}

<div >
  <a href="#" >LEARN MORE</a>
</div>

If you position:absolute your button not in a relative div, it'll be absolute of body.

CodePudding user response：

give the parent container position:relative it will work