Jump to content

How to add Squarespace animations to custom button?

Recommended Posts

I will preface this by saying I come from a C++ background and my css, html, javascript knowledge is still lacking, so I apologize if I'm misunderstanding something basic. 

For my portfolio site I have 3 pages and I have a custom mini navigation on the bottom right of each page that lets you quickly jump between pages.  I'm injecting the following code in the header for the buttons.

<a href="/music" class="music-button sqs-block-button-element--large sqs-button-element--secondary sqs-block-button-element" title="Go to music page" style="display: fixed">music</a>

<a href="/personal" class="personal-button sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element" title="Go to personal page" style="display: fixed">personal</a>

<a href="/software" class="software-button sqs-block-button-element--small sqs-button-element--tertiary sqs-block-button-element" title="Go to software page">software</a>

I would like these buttons to use the site wide animation I've chosen in the editor. Do I need to add an additional class to these elements? Is this something I can even do? If not, can I accomplish this manually?

Thank you! 

Edited by krisBK
added URL
Link to comment
  • Replies 6
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Add these to the class:

 preSlide slideIn

You may want to adjust slideIn to match the animation you've chosen. If you provide your website URL i can give you the correct class.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

These classes would match your website:

preFlex flexIn

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

That doesn't seem to be working. I could be adding it wrong but I'm just adding it to the end of the class list separated by spaces. 

The biggest thing I don't understand is the "personal button" actually uses the animation correctly, but the secondary and tertiary don't. Could it be some of the Squarespace block elements that are interfering? 

Edit: I'm realizing I never said this is a hover animation! If you look at the site and hover over the personal button you can see what I'm talking about. I just want all the buttons to do that.

Edited by krisBK
clarity
Link to comment
21 minutes ago, krisBK said:

Edit: I'm realizing I never said this is a hover animation! If you look at the site and hover over the personal button you can see what I'm talking about. I just want all the buttons to do that.

That explains something, the default site wide animations on the website are to do with how the page loads. I wasn't thinking about the hover effect.

I would use the custom classes you've set to add a hover effect in Custom CSS. 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

okay great, thank you for your help. 

Any idea why when I use sqs-button-element--primary, the hover animation is used, but not when I use secondary and tertiary? My guess is the buttons I'm adding are taking a default Color style, one of which I have not set, is there anyway to see which color style (lightest 1, darkest 2, etc) that my buttons are using? 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.