I'm busy with HTML and CSS and got stuck with this. I have created a button with :hover and :active options, which is centered on the page. Clicking on this button needs to lead to a website.

My HTML is:

<div>
<a href="website"><div id="button">Text</div></a>
</div>

The CSS is:

body, html {
  height: 100%;
}
a {
    text-decoration: none;
}
#button {
    text-transform: uppercase;
    font-size: 18px;
    text-align: center;
    padding: 1em 0.5em 0.8em;
    background-color: white;
    font-family: Myriad Pro, Source Sans Pro, Helvetica, Arial, sans-serif;
    color: #ff4700;
    cursor: pointer;
    width: 150px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #ff4700;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    -webkit-transition: all .1s ease;
    -moz-transition: all .1s ease;
    -ms-transition: all .1s ease;
    -o-transition: all .1s ease;
    transition: all .1s ease;
}

#button:hover {
   background-color: #ff4700;
   color: white;
   border: 1px solid white; 
}

#button:active {
    background-color: #cc3900;
    }

The problem lies in the fact that the whole width of the page is clickable at the height of the button and not only the button itself that is 150px wide and is centered on the page.

I think I have my divs mixed up and it needs other formatting and precedence, but I'm not sure. Thanks for your help!

P.S. First time on StackOverflow, sorry if I formatted something wrong.