The active state of the css button, causing the text to move?

Question

I'm just working on some sample examples for the new site I'm working on.

for some reason, the later 2 of these buttons in firefox (the latter) move the text slightly, as if they were performing a click animation when they entered the active state. why the first button will not experience this problem?

code below

<fieldset style="width:320px; float:left;"> <legend>Pink Button</legend> <button class="pinkbutton"><span>MESSAGE HERE</span></button> <button class="pinkbuttondisabled" disabled="disabled"><span>DISABLED</span></button> </fieldset> <fieldset style="width:320px; float:left;"> <legend>Grey Button</legend> <button class="greybutton"><span>MESSAGE HERE</span></button> <button class="greybuttondisabled" disabled="disabled"><span>DISABLED</span></button> </fieldset> <fieldset style="width:320px; float:left;"> <legend>White Button</legend> <button class="whitebutton"><span>MESSAGE HERE</span></button> <button class="whitebuttondisabled" disabled="disabled"><span>DISABLED</span></button> </fieldset> 

css below

 .pinkbutton { border:1px solid #D2247b; width:150px; height:30px; background-color:#EF0093; color:#FFF;} .pinkbutton:hover {border:1px solid #FF4296; background-color:#FF5EAC;} .pinkbutton:active {border:1px solid #A61D61; background-color:#DC2F85; color:#333232;} .pinkbuttondisabled {border:1px solid #F3C4DB; width:150px; height:30px; background-color:#FDC6E2; color:#FFF;} .greybutton { border:1px solid #BBBBBB; width:150px; height:30px; background-color:#E2E2E2; color:#8d8c8c;} .greybutton:hover {border:1px solid #EF0093; background-color:#E2E2E2; color:#f62c92;} .greybutton:active {border:1px solid #696969; background-color:#BFBFBF; color:#424242;} .greybuttondisabled {border:1px solid #D5D4D4; width:150px; height:30px; background-color:#F4F4F4; color:#d5d4d4;} .whitebutton { border:1px solid #EF0093; width:150px; height:30px; background-color:#FFF; color:#EF0093;} .whitebutton:hover {border:1px solid #898989; background-color:#FFF; color:#898989;} .whitebutton:active {border:1px solid #898989; background-color:#E2E2E2; color:#979696;} .whitebuttondisabled {border:1px solid #FAB2DE; width:150px; height:30px; background-color:#FFF; color:#FAB2DE;} 

any help would be greatly appreciated

Answer 1

Some addition to the active state appears. I added 'padding: 0;' to the initial css declarations (so that they are inherited regardless of state), and this fixed the problem.

Please see jsfiddle .

I do not know why this happened only on the last two buttons.

Answer 2

James Haley's solution works great. http://jsfiddle.net/pxx4V/ I just wanted to clarify that the three buttons had the same problem, it was just a “visual effect” that makes them seem like they didn't. Here is a scenario with a problem where I just changed the color of the text .pinkbutton: active to #FFF http://jsfiddle.net/6L6yu/