css button active state causing text to move?
13,074
Appears there's some padding on the :active state. I added 'padding: 0;' to the initial css declarations (so that it's inherited regardless of state) and it fixed the issue.
Please see this jsfiddle.
I don't know why it happened on only the last 2 buttons though.
Author by
user1372212
Updated on June 08, 2022Comments
-
user1372212 almost 2 years
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;} .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