HTML: order of divs and a tags for href

Question

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!

PS First time on StackOverflow, sorry if I formatted something wrong. Edit: PPS Thank you everyone for your reactions, never thought so many would take their time to help! A couple of methods worked, but this was easiest to incorporate.

<div>
<a href="website" style="display:block" id="button">Text</a>
</div>

Again, thanks!

Answer 1

Add the margin: auto; and display:block; to the a instead of the button .

See this JSFiddle .

Answer 2

Live demo

This happens in Chrome and FireFox but not in Opera, because of the rendering of the <a> element. If you change the display for a to display:inline-block; and put text-align:center; to the parent <div> , it will work.

Answer 3

Does this help.

<div>
<a href="website" style="display:block" id="button">Text</a>
</div>

instead of wrapping the link around a block make the link be the block.

Answer 4

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

Answer 5

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

Then use your css to center the div. This should help!

Answer 6

I would re order the HTML and change the CSS a bit. Put the <a> inside of the <div> . Add the new class, and style to your taste.

Example: http://jsfiddle.net/6tzb6/

HTML

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

CSS

#button a {width:150px;height:100px;display:block;}