Jump to content

Vertical Flip Text Hover Effect

Recommended Posts

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

Screen Shot 2022-06-10 at 2.52.17 pm.png

Edited by jessanderson_____
Link to comment
  • Replies 1
  • Views 608
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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>
  

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.