CSS hover Only Works On The Top Half of My Button

I'm really pulling my hair out on this one. I don't do webpages professionally or on a regular basis; and I'm really stumped.

You can go to my work-in-progress page here:

http://damienivan.com/wip/042/

If you hover over one of the buttons below "featured work," the hover state and "link finger" only appear if your cursor is over the top half of the button.

The CSS is:

    .work_button    
        {
        width:              174px;
        height:             58px;
        float:              left;
        background:         #3FC0E9;
        border-right:       4px solid #30A9D0;
        }

    .work_button:hover
        {
        background:         #FFF;
        color:              #30A9D0;
        }

The HTML is:

<a href="demo_reel.html" target="video_player">
    <div class="work_button">
        <h2>demo reel</h2>
    </div>
</a>

The full CSS file is at:

http://damienivan.com/wip/stylesheets/main.css

Thanks in advance! I'm really stuck here.

-Damien

The problem is that your #work_wrapper div has a fixed height (bad idea). Remove that height, and instead set it to overflow: hidden so that it wraps around your buttons:

#work_wrapper {
width: 890px;
height: 100px;    /*  REMOVE THIS  */
padding-top: 14px;
position: relative;
overflow: hidden;  /*  ADD THIS  */
}

Also, you shouldn't really be using a div and h2 inside your links. Strip them out, and do this instead:

HTML:

<a href="demo_reel.html" target="video_player">demo reel</a>

CSS:

#work_button_wrapper a {
  display: block;
  float: left;
  width: 174px;
  text-align: center;
  line-height: 58px;
  background: #3FC0E9;
  font-size: 1.25em;
}

#work_button_wrapper a:hover {
  background: white;
  color: #3FC0E9;
}