HELP: Custom Button Not Turning Black on Hover - Being Overridden by Grey

👋 Hey Everyone,

I'm currently facing a peculiar issue with a button on my "My Experience" page. When the button is hovered over, it turns dark grey instead of solid black as intended. My suspicion is that something in the Squarespace default code or theme settings is overriding my custom CSS or JavaScript.

Would anyone be able to take a look and help me out? Below is the relevant code:
 

---------------------
CSS:
---------------------

/* Button Hover Styles */
.sqs-block-button-element--medium:hover,
.sqs-button-element--primary:hover,
.sqs-block-button-element:hover {
  background-color: #000000 !important;
  color: #FFFFFF !important;
  border: none !important;
}

---------------------
JavaScript:
---------------------

<script>
document.addEventListener('DOMContentLoaded', (event) => {
  console.log('Document is ready.');
  
  let buttons = document.querySelectorAll('.sqs-block-button-element, .button.sqs-system-button.sqs-editable-button.sqs-button-element--primary.FecjBqAV0ViY3ijU58R1, .newsletter-form-button.sqs-system-button.sqs-editable-button-layout.sqs-editable-button-style.sqs-editable-button-shape.sqs-button-element--primary, .btn.btn--border.theme-btn--primary-inverse.sqs-button-element--primary');
  
  console.log('Buttons found: ', buttons.length);
  
  buttons.forEach(button => {
    console.log('Adding animation to button', button);
    button.style.transition = 'transform 0.3s ease-in-out'; // Add smooth transition for transform only
    
    button.addEventListener('mouseover', function(){
      this.style.transform = 'scale(1.06)';
    });
  
    button.addEventListener('mouseout', function(){
      this.style.transform = 'scale(1.0)';
    });
  });
});
</script>

I've already tried a few different methods to troubleshoot, including inspecting the element, modifying the `!important` attribute, and adding additional console logs, but haven't had any luck. Any guidance or insight would be much appreciated!

Thanks in advance! 🙏

My Website URL: dinosaur-trombone-43wa.squarespace.com

Bump!

I appreciate your help thank you so much!

1 minute ago, mindofalexander said:

I appreciate your help thank you so much!

You're welcome!