To see an example of this issue, visit this link.
I am encountering a problem in Firefox where the button appears differently on hover, focus, and active states compared to the default state. I have searched through various resources like this and this, but have not been able to find a solution.
The issue is that when hovering or clicking on the button, Firefox either adds a border around the bottom of the button or shifts the box shadow by one pixel, creating an outline effect.
Below is the code snippet:
<a class="lm-button lm-button--primary">Primary Button</a>
.lm-button, .lm-button--primary, .lm-button--secondary {
display: inline-block;
padding: .7em 1.25em .4em;
font-family: arial;
line-height: 1em;
text-align: center;
border-radius: 8px;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
text-decoration: none;
position: relative;
transition: all 100ms ease-out, transform 75ms ease, background 300ms ease-out;
}
.lm-button:focus, .lm-button--primary:focus, .lm-button--secondary:focus, .lm-button:active, .lm-button--primary:active, .lm-button--secondary:active {
transform: translateY(0) scale(0.95);
}
.lm-button {
color: #fff;
background: #57554f;
border: 1px solid #57554f;
border-bottom: 0 none;
box-shadow: 0 0.2em 0 #2f2e2b;
margin-right: .5em;
}
.lm-button:hover {
color: #fff;
background: #64625b;
box-shadow: 0 0.25em 0.05em #2f2e2b;
transform: translateY(0) scale(1.025);
}
.lm-button:focus, .lm-button:active {
color: #fff;
border: 1px solid #57554f;
background: #4a4843;
border-bottom: 1px solid #4a4843;
box-shadow: 0 0.25em 0 #4a4843, 0 0.15em 0.15em #1c1c1a inset;
}
I am puzzled by this behavior and are seeking potential solutions.