Removing highlight animations from buttons.

[humbledryer]

Whenever I select an item on the dropdown on mobile the area around it is highlighted.

I want to remove the animation and just have it plain. You can only see it when taping on a mobile or touch-screen device.

I’m using Dawn.

https://anno.capetown/

[PageFly-Richard]

Hi @humbledryer 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
.button:focus-visible, .button:focus, .button.focused, .shopify-payment-button__button--unbranded:focus-visible, .shopify-payment-button [role=button]:focus-visible, .shopify-payment-button__button--unbranded:focus, .shopify-payment-button [role=button]:focus {
    outline: unset !important;
    box-shadow: unset !important;
</style>

Hope this can help you solve the issue 

Best regards,

Richard | PageFly 

[AnneLuo]

Hi, @humbledryer 

Which page does this problem occur on? Can you send a screenshot?

[BSSCommerce-B2B]

HI @humbledryer , 

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

@media only screen and (max-width: 768px) {
  .menu-drawer__menu-item--active, .menu-drawer__menu-item:focus, .menu-drawer__close-button:focus, .menu-drawer__menu-item:hover, .menu-drawer__close-button:hover {
    background-color: transparent !important;
  }
}

Step 3: Save and reload home page.

=>> The result: 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

[humbledryer]

Thank you. that takes away the grey when it’s selected but it doesn’t take away the grey animation when I tap on it. I also want it to take the tapping animation.

[GTLOfficial]

HEllo @humbledryer 
Go to online store ----> themes ----> actions ----> edit code---->base.css
add this code at the end of the file.

.link--text {
background: white !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[humbledryer]

Thanks, I am also trying to remove the tapping animation when I use a phone or tablet.