Need Help with Button Behaviors and Page Scrolling

Hello everyone,

I'm facing some challenges with button behaviors and scroll functionality on my website. Here are the specifics:

1. My Experience Page Button: This button is working perfectly and serves as the ideal example of how I'd like all buttons to behave.

2. Why You Should Hire Me Button: Located on the "My Work" page, this button has an issue with its hover effect. When hovered over, the social media icons move inward, and I can't figure out how to fix this.

3. Let's Get Started Button: Located on the "Let's Work Together" page. While the button styles match the others, the button doesn't smoothly expand upon hovering like I want it to.

Questions:

1. How can I stop the social media icons from moving inward when hovering over the "Why You Should Hire Me" button?
2. How do I properly target the "Let's Get Started" button so it smoothly expands upon hovering?
3. Is it possible to make the page unscrollable until the "Let's Get Started" button is clicked?

Here's the code I'm working with:

CSS:

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

/* Let's Work Together Button Style */
#siteWrapper.site-wrapper .sqs-button-element--primary,
#siteWrapper.site-wrapper .sqs-button-element--secondary,
#siteWrapper.site-wrapper .sqs-button-element--tertiary,
#siteWrapper.site-wrapper .tock-block div#Tock_widget_container>div.TockWidgetWrapper .TockButton-blue.sqs-button-element--primary,
#siteWrapper.site-wrapper .tock-block div#Tock_widget_container>div.TockWidgetWrapper .TockButton-blue.sqs-button-element--secondary,
#siteWrapper.site-wrapper .tock-block div#Tock_widget_container>div.TockWidgetWrapper .TockButton-blue.sqs-button-element--tertiary,
.sqs-block-button-element--medium,
.sqs-button-element--primary,
.sqs-block-button-element {
  background-color: #FFFFFF;
  color: #000000;
  border: 3px solid #000000;
}

#siteWrapper.site-wrapper .sqs-button-element--primary:hover,
#siteWrapper.site-wrapper .sqs-button-element--secondary:hover,
#siteWrapper.site-wrapper .sqs-button-element--tertiary:hover,
#siteWrapper.site-wrapper .tock-block div#Tock_widget_container>div.TockWidgetWrapper .TockButton-blue.sqs-button-element--primary:hover,
#siteWrapper.site-wrapper .tock-block div#Tock_widget_container>div.TockWidgetWrapper .TockButton-blue.sqs-button-element--secondary:hover,
#siteWrapper.site-wrapper .tock-block div#Tock_widget_container>div.TockWidgetWrapper .TockButton-blue.sqs-button-element--tertiary:hover,
.sqs-block-button-element--medium:hover,
.sqs-button-element--primary:hover,
.sqs-block-button-element:hover {
  background-color: #0000fe !important;
  color: #FFFFFF !important;
  border: none !important;
  opacity: 1 !important;
}

JavaScript:

<script>
  // Custom Style for Primary Button Transform 
document.addEventListener('DOMContentLoaded', (event) => {
  console.log('Document is ready.');
  let style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = `
    #siteWrapper.site-wrapper .sqs-button-element--primary {
      transition: transform 0.3s ease-in-out !important;
    }
    #siteWrapper.site-wrapper .sqs-button-element--primary:hover {
      transform: scale(1.06) !important;
    }
    #siteWrapper.site-wrapper .sqs-button-element--primary.special-button:hover {
      transform: scale(1.2) !important;
    }
  `;
  document.head.appendChild(style);
});
</script>

<script>
  // Add Custom Class to Various Button Types
document.querySelectorAll('#siteWrapper .sqs-button-element--primary, #siteWrapper .sqs-button-element--secondary, #siteWrapper .sqs-button-element--tertiary, #siteWrapper .tock-block div#Tock_widget_container>div.TockWidgetWrapper .TockButton-blue.sqs-button-element--primary, #siteWrapper .tock-block div#Tock_widget_container>div.TockWidgetWrapper .TockButton-blue.sqs-button-element--secondary, #siteWrapper .tock-block div#Tock_widget_container>div.TockWidgetWrapper .TockButton-blue.sqs-button-element--tertiary').forEach(button => {
  button.classList.add('my-custom-button');
});
</script>

 

My website URL: https://mindofalexander.squarespace.com/

I'd greatly appreciate any help with these issues. Thank you!

Bump

58 minutes ago, tuanphan said:

#2. When users hover header button > button size changed >> it will push icons to left/right

You can consider increase button container size a bit, before hover Or make 2 icons position fixed by adding this to Custom CSS box

/* Fix header button hover */
.header-actions-action.header-actions-action--social {
    position: absolute;
    right: 30vh;
}

#3. It looks fine to me..

This solved it! Thank you so much for your help! I wasn't sure if my eyes were playing tricks on me for #3 but I'm glad you were able to help me!

Hi @mindofalexander I just wanted to mention a couple of things that were showing up on my screen when viewing your site.

The "why you should hire me" button overlaps some of the icons below on my screen (or at least the IN icon, but I can't tell if there's anything else under it). 

The "explore my resume" button moves behind the footer white space if one of the accordion tabs is open. 

There's a line break after the word "immense" on your about page. 

2 hours ago, AgnesK said:

2 hours ago, AgnesK said:

Hi @mindofalexander I just wanted to mention a couple of things that were showing up on my screen when viewing your site.

The "why you should hire me" button overlaps some of the icons below on my screen (or at least the IN icon, but I can't tell if there's anything else under it). 

The "explore my resume" button moves behind the footer white space if one of the accordion tabs is open. 

There's a line break after the word "immense" on your about page. 

Hello AgnesK,

Thank you for taking the time to provide such detailed feedback on my website. I appreciate it!

1. Why You Should Hire Me Button: Could you please provide a screenshot of the overlapping issue you mentioned? Knowing your screen size and the platform you're on would also be very helpful.

2. Explore My Resume Button: Thank you for bringing this issue to my attention. Upon further investigation, I did notice the button was being cut off when an accordion tab was open. I've made adjustments and am happy to report that the issue has been resolved. If you get a chance to check it again, I would appreciate your feedback to ensure it's working as expected on your end.

3. Line Break After "Immense": Thank you for pointing out the line break issue on the About page. I've made some adjustments to improve the text formatting. If you have a moment to check it again, could you please confirm if the issue is resolved? A screenshot would be really helpful for verification. Are you referring to the word 'passion' appearing on its own line initially?

Looking forward to your response!

Gratefully,
Alexander

Did you solve or still need help with this?

1 minute ago, tuanphan said:

Did you solve or still need help with this?

Solved! Thank you! 🙂