Edit Question - KnowledgeHub

Title Body

I'm just working on some rough examples for a new site i'm working on. for some reason the later 2 of these buttons in firefox(latest) will move the text slightly as if implementing a click animation as they enter the active state. why would the first button not also be experiencing this issue? 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;}

Tags (comma-separated) Cancel