Five Creative Header Button Hover Effects for Squarespace // Free Squarespace Hover Effect Codes

This short tutorial video will walk you through 5 unique code snippets that add a touch of flair to your header buttons. The goal here is to grab your visitors' attention and encourage them to click. Each one of these codes can be updated to match the style of your unique website, and in this video you’ll learn exactly how to use them.

Whether you're a seasoned Squarespace user or just getting started with code customization, this video makes it easy to add a professional touch to your website. The codes you need are below, but make sure you watch the video so you can learn how to use them & how to make them uniquely yours.

/* 90 Degree Corners */
.header-actions-action--cta *{
border-radius: 50px!important;
transition: all 1s!important
}
.header-actions-action--cta:hover *{
border-radius:0px!important;
opacity:1!important;
transition: all 1s!important
}


/* Sliding Background Color */
.header-actions-action--cta *{
background: linear-gradient(to left, #000 50%, #A1D9DD 50%) right!important;
background-size: 200%!important;
transition: .5s ease-out!important;
}
.header-actions-action--cta:hover *{
background-position: left!important;
transition: .5s ease-out!important;
opacity:1!important
}

/* Shadow to Background Color */
.header-actions-action--cta *{
box-shadow:5px 5px 0px red;
transition: all 1s ease-in!important;
}
.header-actions-action--cta:hover *{
box-shadow:none;
background:red!important;
transition: all 1s ease-in!important
}

/* Lifted Button with Shadow */
.header-actions-action--cta{
transition:all .5s!important;
}
.header-actions-action--cta:hover *{
box-shadow: 0 10px 15px rgba(0,0,0,0.5);
margin-top:-2px;
opacity:1!important;
transition:all .5s!important;
}

/* Separating Shadow Colors */
.header-actions-action--cta *{
transition: .5s ease-out!important;
}
.header-actions-action--cta:hover *{
box-shadow: 5px -5px 0px orange,
-5px 5px 0px red;
transition: .5s ease-out!important;
}
-
Related Content:
📑 My Squarespace code collection: https://insidethesquare.co/css
🙋‍♀️ Learn CSS for FREE: https://insidethesquare.co/learn
☕️ If you found this free tutorial helpful, you can buy me a coffee to say thanks: https://buymeacoffee.com/insidethesquare
🎨 How to create colors with code: https://insidethesquare.co/colors
- -
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥ #WebDesign #CSS #Tutorial #HoverEffects #HeaderDesign #WebDevelopment #FrontEndDevelopment #CreativeDesign #UIUX #CodeTutorial