CODEWITHSUNDEEP
htmlcss
Homam Murad
Homam Murad

Reputation: 35

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

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 class="button1" type="submit">click Here!</button>
  </form>
</div>

Upvotes: 2

Views: 329

Answers (3)

Ananth
Ananth

Reputation: 1560

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 class="button1" type="submit">click Here!</button>
  </form>
</div>

Upvotes: 0

MFerguson
MFerguson

Reputation: 1767

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 class="button1" type="submit">click Here!</button>
      </form>
        </div>
</html>

Upvotes: 2

Faiz Sulistiyo
Faiz Sulistiyo

Reputation: 11

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 class="button1" type="submit">click Here!</button>
  </form>
</div>

Upvotes: 0

Related Questions