Jump to content

Customize hover color/effect on Header Button & Form Send Button

Recommended Posts

Site URL: https://plums-flounder-b2ml.squarespace.com/contact

New to squarespace here - just looking for a simple fix to finish up 

I have inserted some css to make the buttons on body of the pages and the one in my footer show with customized effect but I can not figure out how to do this for the button in the header or the Send button on the form. Any ideas?

Also I have the links in the main navigation change color on hover but have not been able to to do this site wide?

Here is the button css I have inserted: 


.sqs-block-button-element--small {
border-radius: 8px;
padding: 15px;
box-shadow: 9px 9px 5px hsl(279, 81%, 29%);  
}
.sqs-block-button-element--small:hover {
background-color: darkred;
  color: white;
box-shadow: 4px 4px 1px hsl(279, 81%, 29%);
}

.sqs-block-button-element--medium {
border-radius: 8px;
padding: 15px;
box-shadow: 9px 9px 5px hsl(279, 81%, 29%);  
}
.sqs-block-button-element--medium:hover {
background-color: grey;
  color: white;
box-shadow: 4px 4px 1px hsl(279, 81%, 29%);
}

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Use this code

.sqs-block-button-element--small, a.btn, input.button {
    border-radius: 8px;
    padding: 15px;
    box-shadow: 9px 9px 5px #5c0e86
}

.sqs-block-button-element--small:hover, a.btn, input.button {
    background-color: darkred;
    color: #fff;
    box-shadow: 4px 4px 1px #5c0e86
}

.sqs-block-button-element--medium, a.btn {
    border-radius: 8px;
    padding: 15px;
    box-shadow: 9px 9px 5px #5c0e86
}

.sqs-block-button-element--medium:hover, a.btn {
    background-color: grey;
    color: #fff;
    box-shadow: 4px 4px 1px #5c0e86
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.