How to make custom css button responsive?

Question

I have created a CSS button but it is not responsive. I have tried adding EM or % but still not working. I want to change width and height according to the screen resolution.

Following is the CSS code I am actually using:

@media only screen and (min-width:321px) and (max-width:480px) { }

HTML

<div>
   <p>
      <button class="btn btn-1 btn-1a">Click Here To Enter The Future</button> 
   </p>
</div>

CSS

.btn {
  font-size:0.875em;
  display:block;
  left:-60px;
  margin-top:35px;
}

Right now the button is moving from left to right, but I want the button to appear at the exact same place.

Answer 1

You could add width:100%; to achieve your objective.

.btn {
      font-size:0.875em;
      display:block;
      left:-60px;
      margin-top:35px;
      width:100%;
    }