When I click a button, the text transforms to be narrower than the button. I do not want this to happen.
I have looked through the css pseudoclasses (hover, active, etc), and none of them produce this effect.
I also tried changing the height and width css properties of the button. I tried auto, 100%, and fixed pixel values. This did not change the behavior.
Is this something I can fix? How can I keep my button text from changing visually when clicked?
Button before being clicked:
Button when clicked:
James,
Thanks so much for replying. I don't think it is just focus and active states because I used my browser dev tools to check each of those styles. However, you helped me go back to the browser to do some more investigation and I found my problem.
With the inspector open, I see that OS appends two empty span elements inside my button when this behavior happens.
I can't find any references to the css class "btn-animation" in the OutSystemsUI theme.
However, I experimented with adding a span by editing the html so I could inspect its properties, and I found one of my custom styles that is causing the problem! Because there is a named class, I can change the css in my custom style.
I just have to take that width value off and my problem is solved!