How to prevent button text movement when button is active in Firefox?
As one of solutions : add padding:0
for button:active
button {
border: medium none;
margin-top: 17px;
width: 224px;
height: 40px;
background: none repeat scroll 0% 0% #7BA6BB;
color: #FFF;
outline: medium none;
cursor: pointer;
}
button:active {
padding: 0px;
}
<button>Button</button>
Or you can add span
(or maybe another tag that you like) into your button
like this here:
button {
border: medium none;
margin-top: 17px;
width: 224px;
height: 40px;
background: none repeat scroll 0% 0% #7BA6BB;
color: #FFF;
outline: medium none;
cursor: pointer;
}
button:active {
padding: 0px;
}
<button><span>Button</span></button>