Archived topic
Button design after WP 6.1 upgrade
5 replies · Started by Eva Maria on November 7, 2022
Hi,
I noticed some weird loss of button functionality after 6.1 upgrade. The issue consists with the "outline" style, which does not seem to react anymore to any parameter changed in customizer or block menue. The way I configured it, was for the button to appear as outlined box, and then change to the hover/after-hover colors set in customizer. The way it was meant to be can still be seen in my Kinsta staging environment, where I have not yet performed the WP update. (https://staging-lipsandskin.kinsta.cloud/faltenbehandlung). When using outline style in the live environment, it would draw the outline, but not change colors on hover/click. Moreover, whenever I create a new block button now, it automatically comes with rounded corners, irrespective of what I set as parameters.
However, all of the above is only applicable to button style "outline". Style "fill" just works fine. Therefore, in the live environment I temporarily changed from outline to fill until the issue being looked at by you guys. Thanks.
Thomas
Hi there,
we'll take a look at that, seems WP has been messing with the CSS classes on the Core blocks again.
For the Radius corner that CSS comes directly from the core block, to get rid of it - select the Button and in its Settings -> Border ---> Radius set the value to 0 px
Forgot one thing: The outline functionality actually works in the editor, but not on the html output.
Forgot one thing: The outline functionality actually works in the editor, but not on the html output.
I'm not sure I understand your description, do you mean it doesn't work on front end?
I just checked your link, and the outlined button is working normally, the border color is the same as the text color which is white, and your background color is also white, so you would not see the border:
https://www.screencast.com/t/Hyiy809RY8
If I change the button text color to red, you can see it here:
https://www.screencast.com/t/tvKQ5BEgP
Let me know if I miss anything.
Probably the same problem here with the buttons using the outline style: https://www.brueckenhaus-naumburg.de . Before the WP update, the button's background color changed to black and text color to white as a hover effect, but does not work anymore right now on front end but in the editor mode.
@ying : I think the link in the question that started the thread referred to a staging environment which has "not yet performed the WP update", so it should work there.
Thanks
Just to cover: WP has made some changes as to how their buttons CSS works.
1. The border radius, you need to manually set the Settings -> Border -> Radius value to 0 in the editor to remove them.
2. The Colors styles from the theme will need to be updated so as make this work again
IF needed we can provide some CSS.
Let me know
