How to add Squarespace animations to custom button?

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! 

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.

I thought my post would show the URL I gave, apologies. https://www.kriscrawford.info/personal

I will give this a try, thank you

These classes would match your website:

preFlex flexIn

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.

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. 

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? 

Hey Kris, just found this thread.

So what did you add to your code to make it animate in the flex style?