Button opacity transition on hover with new fluid engine

Site URL: https://www.10peaks.ca

Since the new fluid engine my buttons - site side - have a hover transition with opacity. 

I can't figure out how to remove it or what is causing it. 

See this page on the site https://www.10peaks.ca/breakfastmeetup

Does anyone have a suggestion. 

Thank you in advance.

57 minutes ago, chrisshaddock said:

Site URL: https://www.10peaks.ca

Since the new fluid engine my buttons - site side - have a hover transition with opacity. 

I can't figure out how to remove it or what is causing it. 

See this page on the site https://www.10peaks.ca/breakfastmeetup

Does anyone have a suggestion. 

Thank you in advance.

Try adding to Home > Design > Custom Css

.secondary-button-style-solid .sqs-button-element--secondary:hover {
  opacity: 1;
}
.header-actions-action--cta a:hover {
  opacity: 1 !important;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Thanks @bangank36 

That worked. Any idea how that hover effect started? Is there a change or bug with fluid engine? 

Thanks

Hey @bangank36

Looks like I spoke too soon. It's still doing it. 

Any other ideas? 

On 9/11/2022 at 3:21 AM, chrisshaddock said:

Thanks @bangank36 

That worked. Any idea how that hover effect started? Is there a change or bug with fluid engine? 

Thanks

 

You may want to check your animation settings ...they now effect everything site-wide (whereas before we could have image animation, site animation, etc) ... I noticed some unwanted effects on my buttons depending on the animation style I chose ...

Would be really nice if they fixed this!

What is your issues? can you take some screenshots?

Hey @bangank36

I have attached screen shots. 

https://www.10peaks.ca/breakfastmeetup

Using the following code to remove the current opacity style

@media (hover: hover){
  .primary-button-style-solid .site-wrapper .sqs-button-element--primary:hover {
    opacity: 1;
  }
}

On 9/18/2022 at 11:14 AM, Beyondspace said:

Using the following code to remove the current opacity style

@media (hover: hover){
  .primary-button-style-solid .site-wrapper .sqs-button-element--primary:hover {
    opacity: 1;
  }
}

 

This works but i want to apply to only one button. How can I do that? Tried adding block ID but that didnt work 

On 3/19/2023 at 6:24 PM, TLCDesigns said:

This works but i want to apply to only one button. How can I do that? Tried adding block ID but that didnt work 

Use button block id

@media (hover: hover){
  #button-block-id .sqs-button-element--primary:hover {
    opacity: 1;
  }
}

use this tool to find button block id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

2 hours ago, tuanphan said:

Use button block id

@media (hover: hover){
  #button-block-id .sqs-button-element--primary:hover {
    opacity: 1;
  }
}

use this tool to find button block id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Thank you! it worked