Can't get rid of button outline

[Theo_Bee]

Hi! I am trying to get rid of an outline on some buttons on my store, but nothing seems to work. I have also tried adjusting theme button settings, but that didn’t work either. Can anyone help me get rid of the outline?

Here is a link to my store: https://nuvocollection.com/

You can see the button in question in the image I attached (“Shop hair claws” button, on my homepage)

Any help would be greatly appreciated!

Kind regards

[Artzen_tech]

Hi @Theo_Bee
Its Artzen Technologies! We will be happy to help you today.

You can follow the below css which I have mentioned. And check the result.

1. Go to your Online Store
2. Edit Code
3. Find CSS File
4. Add the following CSS

.rich-text__buttons button:hover:after{
 display: none
}

It will remove the outline on button.

If my solution helped you, then please mark it as accepted.

Let me know if need further assistance
Regards,
Artzen Technologies

[moek]

Hello @Theo_Bee !

My name is Mike and I will try to help you.

The issue you are facing is about the default theme’s styles. If you are familiar with code you can edit the theme code and remove it. If not, consider asking for the help of a professional.

The outline comes from base.css file, line №1364.

.button:after

And the outline is a “box-shadow” CSS property, you can remove it and save the changes. On the initial button state, the outline should be gone. But there is also a hover outline. The hover outline comes from base.css line №1381.

.button:not([disabled]):hover:after

Here you can remove the “box-shadow” CSS property and outline should be gone for the hover state as well.

But, consider using some hover affect to show users any interactivity.

I hope my answer helps you have a great day!

Best Regards,
Mike

[Rahul_dhiman]

Hello @Theo_Bee
Go to online store ---------> themes --------------> actions ------> edit code------->base.css ----> line number 723
delete this code

.button:not([disabled]):hover:after, .shopify-challenge__button:hover:after, .customer button:hover:after, .shopify-payment-button__button--unbranded:hover:after {
--border-offset: 1.3px;
box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(var(--color-button-text),
var(--border-opacity)), 0 0 0 calc(var(--buttons-border-width) + 1px) rgba(var(--color-button), var(--alpha-button-background));
}

result

If this was helpful, hit the like button and mark the job as completed.
Thanks

[Theo_Bee]

This worked - thank you so much!

[Rahul_dhiman]

Thanks.