HTML Button Size - html

Question

Hello I've created a webpage with a banner on it and a button is centered under the banner. When I go to access my website on a large screen the banner resizes to fit the screen but the button stays the same size. I've tried looking for an answer but could not find it.
Here is my code:
HTML
<a href='http://www.aporiagrand.com/shop/' class='button'>SHOP</a>
CSS
.button {
border: 2px solid #ffffff;
background: #000000;
background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#000000));
background: -webkit-linear-gradient(top, #000000, #000000);
background: -moz-linear-gradient(top, #000000, #000000);
background: -ms-linear-gradient(top, #000000, #000000);
background: -o-linear-gradient(top, #000000, #000000);
background-image: -ms-linear-gradient(top, #000000 0%, #000000 100%);
padding: 12px 24px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
text-shadow: #000000 0 1px 0;
color: #ffffff;
font-size: 18px;
font-family: helvetica, serif;
text-decoration: none;
vertical-align: center;
position:relative;
transition: .5s ease;
top: 1px;
left: 45%;
right: -45%;
bottom: -20%;
}
.button:hover {
border: 2px solid #ffffff;
text-shadow: #ffffff 0 1px 0;
background: #ffffff;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff));
background: -webkit-linear-gradient(top, #ffffff, #ffffff);
background: -moz-linear-gradient(top, #ffffff, #ffffff);
background: -ms-linear-gradient(top, #ffffff, #ffffff);
background: -o-linear-gradient(top, #ffffff, #ffffff);
background-image: -ms-linear-gradient(top, #ffffff 0%, #ffffff 100%);
color: #000000;
}
.button:active {
text-shadow: #dbdbdb 0 1px 0;
border: 2px solid #dbdbdb;
background: #dbdbdb;
background: -webkit-gradient(linear, left top, left bottom, from(#dbdbdb), to(#ffffff));
background: -webkit-linear-gradient(top, #dbdbdb, #dbdbdb);
background: -ms-linear-gradient(top, #dbdbdb, #dbdbdb);
background: -o-linear-gradient(top, #dbdbdb, #dbdbdb);
background-image: -ms-linear-gradient(top, #dbdbdb 0%, #dbdbdb 100%);
color: #dbdbdb;
}

Answer 1

I assume you are using this
position:relative;
transition: .5s ease;
top: 1px;
left: 45%;
right: -45%;
bottom: -20%;
as a way to center your button; might I suggest instead you try to use something along the lines of:
margin: 0 auto; max-width:25%; text-align:center;
Your button currently won't scale with your site as I believe the only thing giving it any size is the padding you've applied. Using percentages is generally a good way to deal with these kind of issues.

Answer 2

I noticed that your font-size for the button in css is fixed, so the button size is not being small in small screens.
See this code:
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
in stackoverflow link
and try changing font-size:18px; to something like font-size: 4.0vw; according to your requirements.