Button Hover Delays

Hi, I am having a tiny issue where I've added a custom hover on my buttons. It works, but it feels like there is the tiniest delay on the colour of the type roll over vs the drop shadow roll over effect where the drop shadow happens before the text colour? its very tiny but feels off to me

on my regular buttons I am using:

.sqs-block-button-element:hover
   {
     background-color:#F6F4F1!important;
 color: #F42D27!important;
   box-shadow: 5px 5px #F42D27;
  }

and header

.header-actions .btn:hover
   {
     background-color:#F6F4F1!important;
 color: #F42D27!important;
   box-shadow: 5px 5px #F42D27;
  }

I want when it rolls over to be the same colour as the website background but the font change colour and a box shadow drop , ive tried the background colour to be the same and transparent but i still notice the slightest delay

any help is appreciated

site is https://flugelhorn-seahorse-lzrb.squarespace.com/?p&p

pw:design

12 hours ago, jenniferboddam said:

Hi, I am having a tiny issue where I've added a custom hover on my buttons. It works, but it feels like there is the tiniest delay on the colour of the type roll over vs the drop shadow roll over effect where the drop shadow happens before the text colour? its very tiny but feels off to me

 

on my regular buttons I am using:

.sqs-block-button-element:hover
   {
     background-color:#F6F4F1!important;
 color: #F42D27!important;
   box-shadow: 5px 5px #F42D27;
  }

 

and header

 

.header-actions .btn:hover
   {
     background-color:#F6F4F1!important;
 color: #F42D27!important;
   box-shadow: 5px 5px #F42D27;
  }

I want when it rolls over to be the same colour as the website background but the font change colour and a box shadow drop , ive tried the background colour to be the same and transparent but i still notice the slightest delay

any help is appreciated

 

site is https://flugelhorn-seahorse-lzrb.squarespace.com/?p&p

pw:design

 

Try adding to Design > Custom CSS

a.sqs-block-button-element--small.sqs-block-button-element {
    transition: unset !important;
}

@tuanphan that seems to have worked thank you!