Jump to content

Gradient Header Button?

Go to solution Solved by tuanphan,

Recommended Posts

Hey SS friends,
I'm trying to get my header button to be a gradient the same way as my body fonts.

https://matthewhooks.squarespace.com/

pw: hooks

Any ideas why the following code doesn't work?
 

/* Flipped Diagonal Three-Stage Gradient for Body Buttons */
.sqs-block-button-element,  {
background: #007991;
background: -webkit-linear-gradient(to top right, #9C2079, #CF2E43, #EA542E);
background: linear-gradient(to top right, #9C2079, #CF2E43, #EA542E);
}

.sqs-block-button-element:hover{
background: #007991;
background: -webkit-linear-gradient(to top left, #9C2079, #CF2E43, #EA542E);
background: linear-gradient(to top left, #9C2079, #CF2E43, #EA542E);
}

/* Flipped Diagonal Three-Stage Gradient for Header Button */
.header-actions-action--cta {
background: #007991;
background: -webkit-linear-gradient(to top right, #9C2079, #CF2E43, #EA542E);
background: linear-gradient(to top right, #9C2079, #CF2E43, #EA542E);
}

.header-actions-action--cta:hover {
background: #007991;
background: -webkit-linear-gradient(to top left, #9C2079, #CF2E43, #EA542E);
background: linear-gradient(to top left, #9C2079, #CF2E43, #EA542E);
}

 

Link to comment
  • Replies 1
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

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.