Is it possible to remove hover effect on buttons, Debut theme?

Store Design
1

www.withlukestudios.com

no pw

I would like to remove the hover effect when cursor is moving over a button, is this possible? Ideally just on mobile, as it’s causing button functionality issues.

Thanks!

1 Like
2

@WithLuke

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
    this code apply for after 5 - 6 second
.btn:not([disabled]):hover, .shopify-payment-button .shopify-payment-button__button--unbranded:not([disabled]):hover, .btn:focus, .shopify-payment-button .shopify-payment-button__button--unbranded:focus {
    color: var(--color-btn-primary-text);
    background-color: var(--color-btn-primary);
    cursor: text;
}
3

Hi @WithLuke ,

Hope you are doing well. I suggest you just remove/hide button hover state on mobile. Please place this code at the end of theme.scss:

@media only screen and (max-width: 1366px) {

.btn:not([disabled]):hover,

.shopify-payment-button .shopify-payment-button__button–unbranded:not([disabled]):hover,

.btn:focus,

.shopify-payment-button .shopify-payment-button__button–unbranded:focus {

color: var(–color-btn-primary-text);

background-color: var(–color-btn-primary);

}

}

Hope this helps!

4

Thank you - I tried this code and it didn’t remove the hover state, I still have to click the button once on IOS to “select” the button, then click again to process a “click”

I tried without the mobile only @media line and it didn’t remove it on desktop either - is this the correct code?

Appreciate the help!

5

Hi @WithLuke ,

Can you please add me as a staff so I can check if for you? https://help.shopify.com/en/manual/your-account/staff-accounts/create-staff-accounts#add-staff

You can remove me after finishing. This is my email: tuanthinhit@gmail.com.

Hope to hear from you soon.

6

@WithLuke

Hey,

I have recently wrote a tutorial on this, let me know if it works for you. I’ll be happy to help if you have any issues.

Kind regards,
Diego

7

Hi Diego,

Thanks for sharing - I’m actually looking to remove the button hover functionality on mobile just because the buttons on my mobile site often require 2 taps to function. This code to change the background won’t really affect that for mobile because the hidden hover state is still there.

8

Hey!

I’ve added you as admin, thanks!

9

@WithLuke

I see, where exactly do you have to tap twice to make the button work? This is not default behavior of Debut nor hover functionality.

10

Hi @WithLuke ,

I fixed it for your site. Please re-check and let me know.

11

Dear @WithLuke

  • From your Shopify admin, go to Online Store > themes
  • Locate your current theme and then click Actions > Edit code
  • After that in the Assets folder, click to open your theme.scss.liquid file
  • Go to the very bottom of this file and paste the following code
/* Start */
.btn:hover {background-color: var(--color-btn-primary) !important;}
/* End*/
  • Ensure that the code was copied exactly from this guide and pasted correctly, making sure no characters or symbols are missing.
  • Save and check your theme by refreshing it.
12

Hi I am facing the same issue on my store whereby it requires two times at times to process the click of a button when on mobile, I would like to get rid of the hover function on mobile specifically. How can i do that. Currently on Debutify 2.0.2

1 Like
13

@Nero32

sorry for this issue

mobile hover doesn’t work because mobile hover doesn’t allow its only touch effect

14

I am actually wanting to get rid of the sticky hover effect on buttons when on mobile. That is because the current state is that users may have to tap twice on a button to register it as a click. Are there any solutions to get rid of it on my theme? Thank you in advance!

15

@Nero32

thanks for update not sorry

16

Hi, I am having the same issue on my website. Are you able to help correct it if I add you as staff? Please confirm and I will send an invite to tuantinhit@gmail.com

Thank you!