Removing Text Transform After Button is Clicked

[iamwithU]

Hello excellent support team.
Recently your colleague helped me to remove the text transform from my buttons using this code:
.button {
text-shadow: unset;
}

That worked on all my Woocommerce pages. But not on the forms. Any clue why?

Also when the button is clicked, the text transform comes back - ie the “interaction” effect. Can you kindly teach me how I can remove the text shadow also from the interaction effect?

[tristup]

Hi @iamwithU,

Thanks for reaching out.
On the checkout page the Button is the Submit button and the CSS code is applied to the button class which is not applied to it. You need to add the following custom CSS code to remove the Text shadow from the submit button.

input[type=submit], input[type=submit]:hover
{
    text-shadow: none !important;
}

Also, I found that the Text shadow in the Button appears on mouseover. You need to add the following code to avoid it.

.button:hover
{
    text-shadow: none !important;
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes which means we can’t fix it in case it conflicts with something on your site nor will we enhance it. Further customization should be directed to a third-party developer or you can avail One, where we answer the questions beyond normal theme support.

Thanks

[iamwithU]

Thank you @tristup for your prompt response and thorough advice. It works! Appreciate it

[tristup]

Hi @iamwithU,

Glad that we are able to help you.

Thanks