Prevent circular buttons clickable outside circle in Firefox

Question

In Firefox the clickable area of my circular buttons seems to extend outside of the circle in the shape of a square. This does not happen in Chrome/Safari, which display everything properly.

There's a "rotate on hover" feature over the buttons and this glitch is especially evident when hovering diagonally over the bottom left/right corner of the buttons and moving to the center. Anyone have any idea how to fix this?

Test-site: http://parkerrichard.com/new/index.html

HTML

    <nav class="centered" role="navigation">
    <div class="container">
        <div class="centered">
            <ul>
                <li>
                    <a href="#"><button class="design"></button></a>
                </li>
                <li>
                    <a href="#"><button class="photo"></button></a>
                </li>
                <li>
                    <a href="#"><button class="music"></button></a>
                </li>
                <li>
                    <a href="#"><button class="art"></button></a>
                </li>
                <li>
                    <a href="#"><button class="parker"></button></a>
                </li>
            </ul>
        </div>
    </div><!--/container -->
</nav><!--/navbar -->

CSS

nav {
    margin-top: 20px;
    margin-bottom: 80px;
}

nav ul {
    list-style: none;
    margin: 10px 0 0 -30px;
}

nav li a {
    font-size: 25px;
}

nav button {
    width: 100%;
    opacity: .1;
    transition: opacity .7s ease-out;
    -moz-transition: opacity .7s ease-out;
    -webkit-transition: opacity .7s ease-out;
    -o-transition: opacity .7s ease-out;
}

nav button:hover {
    opacity: .5;
}

.art:hover, .music:hover, .photo:hover, .design:hover {
    -webkit-animation:spin 2s ease;
    -moz-animation:spin 2s ease;
    animation:spin 2s ease;
}
@-moz-keyframes spin { 10% { -moz-transform: rotate(18deg); } }
@-webkit-keyframes spin { 10% { -webkit-transform: rotate(18deg); } }
@keyframes spin { 10% { -webkit-transform: rotate(18deg); transform:rotate(18deg); } }


nav button {
    border-radius:50%;
    position: absolute;
    opacity: 50% !important;
    left: 50%;
    right: 50%;
}

.parker {
    margin-top: 196px;
    margin-left: -100px;
    width: 200px;
    height: 200px;
    background: transparent url('../img/parker.jpg');
    background-size: 100%;
    opacity: 1 !important;
}

.art {
    margin-top: 144px;
    margin-left: -150px;
    width: 300px;
    height: 300px;
    background: transparent url('../img/art.jpg');
}

.music {
    margin-top: 96px;
    margin-left: -198px;
    width: 400px;
    height: 400px;
    background: transparent url('../img/music.jpg');
}

.photo {
    margin-top: 48px;
    margin-left: -248px;
    width: 500px;
    height: 500px;
    background: transparent url('../img/photo.jpg');
}

.design {
    margin-left: -296px;
    width: 600px;
    height: 600px;
    background: transparent url('../img/design.jpg');
}

Answer 1

Firefox seems to have a problem with border-radius on button elements (something which was a problem in webkit browsers in the past aswell, see: Button border radius and cursor). This will probably get fixed in a future version, but I would suggest using divs instead.

The following should work (here also a codepen):

nav {
    margin-top: 20px;
    margin-bottom: 80px;
}

nav ul {
    list-style: none;
    margin: 10px 0 0 -30px;
}

nav li a {
    font-size: 25px;
}

nav li div {
    width: 100%;
    opacity: .1;
    transition: opacity .7s ease-out;
    -moz-transition: opacity .7s ease-out;
    -webkit-transition: opacity .7s ease-out;
    -o-transition: opacity .7s ease-out;
}


nav li div:hover {
    opacity: .5;
}

.art:hover, .music:hover, .photo:hover, .design:hover {
    -webkit-animation:spin 2s ease;
    -moz-animation:spin 2s ease;
    animation:spin 2s ease;
}
@-moz-keyframes spin { 10% { -moz-transform: rotate(18deg); } }
@-webkit-keyframes spin { 10% { -webkit-transform: rotate(18deg); } }
@keyframes spin { 10% { -webkit-transform: rotate(18deg); transform:rotate(18deg); } }


nav li div {
    border-radius:50%;
    position: absolute;
    opacity: 50% !important;
    left: 50%;
    right: 50%;
}

.parker {
    margin-top: 196px;
    margin-left: -100px;
    width: 200px;
    height: 200px;
    background: transparent url('http://parkerrichard.com/new/img/parker.jpg');
    background-size: 100%;
    opacity: 1 !important;
}

.art {
    margin-top: 144px;
    margin-left: -150px;
    width: 300px;
    height: 300px;
    background: transparent url('http://parkerrichard.com/new/img/art.jpg');
}

.music {
    margin-top: 96px;
    margin-left: -198px;
    width: 400px;
    height: 400px;
    background: transparent url('http://parkerrichard.com/new/img/music.jpg');
}

.photo {
    margin-top: 48px;
    margin-left: -248px;
    width: 500px;
    height: 500px;
    background: transparent url('http://parkerrichard.com/new/img/photo.jpg');
}

.design {
    margin-left: -296px;
    width: 600px;
    height: 600px;
    background: transparent url('http://parkerrichard.com/new/img/design.jpg');
}

<nav class="centered" role="navigation">
    <div class="container">
        <div class="centered">
            <ul>
                <li>
                    <a href="#"><div class="design"></div></a>
                </li>
                <li>
                    <a href="#"><div class="photo"></div></a>
                </li>
                <li>
                    <a href="#"><div class="music"></div></a>
                </li>
                <li>
                    <a href="#"><div class="art"></div></a>
                </li>
                <li>
                    <a href="#"><div class="parker"></div></a>
                </li>
            </ul>
        </div>
    </div><!--/container -->
</nav><!--/navbar -->