Sample:
<button>Button</button>
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;
}
http://codepen.io/anon/pen/ByaLZN
Browser: Mozilla Firefox (the latest version)
When button is clicked (active), button text moves right. How To prevent it?
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With