how do I position my element on css based on the screen border-CodePudding

I want to position my element (the button) based on the size of the screen, with what I have done, it works pretty well until i make the screen size a bit smaller, then the box starts going out of screen on the right side, how do i fix this?

.button1 {
  background-color: #ffffff;
  border: 2px solid #e5ff00;
  color: rgb(0, 0, 0);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 8px;
  position: relative;
  cursor: pointer;
}
.buttonbox{
  position: relative;
  animation-name: moving;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
.button1:hover{
  background-color: #e5ff00;
  transition: 0.5s;
}

@keyframes moving {
  0%{
    padding-left: 0%;
  }
  100%{
    padding-left: 90%;
  }
}

<div class= "buttonbox">
  <form action="https://www.faster.rent/">
    <button  type="submit">click Here!</button>
  </form>
</div>

CodePudding user response：

Basically what you are trying to do is get the width of the viewport (screen width) and pad to the left of your button, minus the width of the button.

This can be done by using calc in your keyframes:

@keyframes moving {
  0%{
    padding-left: 0%;
  }
  100%{
    padding-left: calc(100vw - 162px);
  }
}

where 100vw corresponds to 100% of the viewport width.

.button1 {
  background-color: #ffffff;
  border: 2px solid #e5ff00;
  color: rgb(0, 0, 0);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 8px;
  position: relative;
  cursor: pointer;
  width: 142px;
}
.buttonbox{
  position: relative;
  animation-name: moving;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
.button1:hover{
  background-color: #e5ff00;
  transition: 0.5s;
}

@keyframes moving {
  0%{
    padding-left: 0%;
  }
  100%{
    padding-left: calc(100vw - 162px);
  }
}

<!DOCTYPE html>
<html>
    <header>
        <link rel="stylesheet" type="text/css" href="./style.css"/>
    </header>
        <div class= "buttonbox">
      <form action="https://www.faster.rent/">
         <button  type="submit">click Here!</button>
      </form>
        </div>
</html>

CodePudding user response：

first make the buttonbox width:100% and the position:relative, make the button position:absolute,then you can animate the button inside buttonbox

.button1 {
  position: absolute;
  background-color: #ffffff;
  border: 2px solid #e5ff00;
  color: rgb(0, 0, 0);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  animation-name: moving;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
.buttonbox{
  width: 100%;
  position: relative;
}
.button1:hover{
  background-color: #e5ff00;
  transition: 0.5s;
}

@keyframes moving {
  0%{
    left:0%      }
  100%{
    left: 85%;
  }
}

<div class= "buttonbox">
  <form action="https://www.faster.rent/">
    <button  type="submit">click Here!</button>
  </form>
</div>

CodePudding user response：

Using media Query is another ways to handle this scenario. We can use the media query to control animation to avoid having button hide behind the scroll. So in this scenario, i have created two animation moving and movingSmall.

.button1 {
  background-color: #ffffff;
  border: 2px solid #e5ff00;
  color: rgb(0, 0, 0);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 8px;
  position: relative;
  cursor: pointer;
}
.buttonbox{
width: 100%;
  position: relative;
  animation-name: moving;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}
@media all and (max-width: 600px) {
 .buttonbox{
  animation-name: movingSmall;
 }
}
.button1:hover{
  background-color: #e5ff00;
  transition: 0.5s;
}

@keyframes movingSmall {
  0%{
    left:0
  }
  100%{
   left: 65%;
    
  }
}
@keyframes moving {
  0%{
    left:0
  }
  100%{
   left: 80%;
    
  }
}

<div class= "buttonbox">
  <form action="https://www.faster.rent/">
    <button  type="submit">click Here!</button>
  </form>
</div>