Five Creative Header Button Hover Effects

Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content

---

About This Tutorial

This tutorial was recorded using Squarespace 7.1 and these codes will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes

Turn the button in your main navigation into something extra special with a creative hover effect!

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.

Squarespace Tutorial

---

Code Example

Here are the codes from this tutorial. Make sure you update important values like the colors to make these codes 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: insidethesquare.co/css

🙋‍♀️ Learn CSS for FREE: insidethesquare.co/learn

🎨 Creating colors with code: insidethesquare.co/colors

☕️ If you found this free tutorial helpful, you can buy me a coffee to say thanks: buymeacoffee.com/insidethesquare