Question

http://justxp.plutohost.net/gxx/

Try hovering the buttons.

The hover / link will only work if you hover on the head of the buttons.
Why is this happening?

This is the code:

    <a href="#">
        <div class="button-1">
            <span class="bebas">play</span>
        </div>
    </a>
    <a href="#">
        <div class="button-1">
            <span class="bebas">community</span>
        </div>
    </a>
    <a href="#">
        <div class="button-1">
            <span class="bebas">account help</span>
        </div>
    </a>

css

   .button-1 {
   background-image: url("../img/buttonoff.png");
   background-repeat: no-repeat;
width: 302px;
height: 82px;
margin-left: 1.4%;
margin-top: 1%;
float: left;
text-align: center;
line-height: 90px;
-webkit-transition: all 200ms ease-in-out;
        -moz-transition: all 200ms ease-in-out;
        -ms-transition: all 200ms ease-in-out;
        -o-transition: all 200ms ease-in-out;
        transition: all 200ms ease-in-out;
}
.button-1:hover {
background-image: url("../img/buttonon.png");
background-repeat: no-repeat;
width: 302px;
height: 82px;
-webkit-transition: all 200ms ease-in-out;
        -moz-transition: all 200ms ease-in-out;
        -ms-transition: all 200ms ease-in-out;
        -o-transition: all 200ms ease-in-out;
        transition: all 200ms ease-in-out;
}

I see nothing wrong with that?
I tried making the height bigger, still doesn’t work.

I’m very curious about this!

Answer 1

You need to add a margin on your class news:

.news {
    position: relative;
    top: 5%;
    margin-top: 65px;
}

Edit:

Bonus! Please use css3 background gradients instead of images on background of your buttons.

gradients.glrzad.com

Hope this helps, sorry if I miss interfered.