Prevent circular buttons clickable outside circle in Firefox - html

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>
<button class="design"></button>
</li>
<li>
<button class="photo"></button>
</li>
<li>
<button class="music"></button>
</li>
<li>
<button class="art"></button>
</li>
<li>
<button class="parker"></button>
</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>
<div class="design"></div>
</li>
<li>
<div class="photo"></div>
</li>
<li>
<div class="music"></div>
</li>
<li>
<div class="art"></div>
</li>
<li>
<div class="parker"></div>
</li>
</ul>
</div>
</div><!--/container -->
</nav><!--/navbar -->