Vertical Flip Text Hover Effect

Site URL: https://wolverine-clover-cpnl.squarespace.com/

Hi there, 

I am looking to achieve the same link hover effect as what can be seen on https://jessandersonstudio.com/

Here, you can see a text hover vertical flip effect. 

I would like this effect to be present on my new Squarespace website below.

URL: https://wolverine-clover-cpnl.squarespace.com/
Password: rhino2022

Any help would be appreciated on achieving this. 

Thank you
Jess

Add a Code Block under Welcome to... text > Paste this code

<a href="#" class="sr-button style-3 button-medium" target="_self"><span class="text">
			<span>Learn more about who we are and what we do</span>
			<span>Learn more about who we are and what we do</span>
		</span></a>
<style>
  .sr-button.style-3 {
    background: none;
    padding: 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.11) !important;
    border-radius: 0;
}
.sr-button.style-3 {
    color: #fff !important;
    border-color: rgba(255,255,255,0.28) !important;
}
.sr-button.style-3.button-medium {
    line-height: 24px;
    height: 24px;
}
.sr-button .text {
    display: inline-block;
    overflow: hidden;
    position: relative;
    line-height: 20px;
    height: 20px;
    z-index: 1;
    margin-top: 10px;
    vertical-align: top;
}
.sr-button .text span {
    display: inline-block;
    line-height: 20px;
    height: 20px;
    -webkit-transition: all 450ms cubic-bezier(0.195, 0.290, 0.045, 0.995);
    -moz-transition: all 450ms cubic-bezier(0.195, 0.290, 0.045, 0.995);
    -o-transition: all 450ms cubic-bezier(0.195, 0.290, 0.045, 0.995);
    transition: all 450ms cubic-bezier(0.195, 0.290, 0.045, 0.995);
    -webkit-transition-timing-function: cubic-bezier(0.195, 0.290, 0.045, 0.995);
    -moz-transition-timing-function: cubic-bezier(0.195, 0.290, 0.045, 0.995);
    -o-transition-timing-function: cubic-bezier(0.195, 0.290, 0.045, 0.995);
    transition-timing-function: cubic-bezier(0.195, 0.290, 0.045, 0.995);
}
.sr-button:hover .text span {
    transform: translateY(100%) !important;
}
.sr-button .text span:not(:first-child) {
    position: absolute;
    top: -100%;
    left: 0;
}
</style>