HTML Button Size

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.