Jump to content

Custom Landing Page Button CSS

Recommended Posts

I'm editing a collection landing page and here is the CSS I have developed so far:


#collection-xxxxxx {

.Header {display:none;}
.Footer {display:none;}

.form-wrapper .field-list .field .field-element {background-color: rgba(0,0,0,.5); }

.form-wrapper .field-list .field .field-element:focus { background-color: rgba(255,255,255,.9); }

.sqs-block-form input {color: white;}

.sqs-block-form input:focus {color: black;}

.form-button-wrapper .sqs-editable-button-color {background-color: rgba(255,0,0,1);}

.sgs-editable-button-color:hover {color: blue;}
 }

I set up the form, so that it is transparent and when you enter text the fields are white (text black) and when you are not editing the fields the text is white. I'm having issues with the button.

When I hover over the button the background is white.

I want the button background to be red, text white, and when I hover over the button the background either stays red or changes to anything but a light color.

I'm okay with the button hover to change to white if I can have the button text color change to black at the same time.

What am I missing here?

Link to comment
  • Replies 2
  • Views 772
  • Created
  • Last Reply

@tuanphan Here is the CSS I have for this page.


#collection-5d6341b2f8b6d200017b4c40 {
.Header {display:none;}
.Footer {display:none;}
.Mobile {display:none;}
.form-wrapper .field-list .field .field-element {background-color: rgba(0,0,0,.5); }
.form-wrapper .field-list .field .field-element:focus { background-color: rgba(255,255,255,.9); }
.sqs-block-form input {color: white;}
.sqs-block-form input:focus {color: black;}
.form-button-wrapper .sqs-editable-button-color {background-color: rgba(255,0,0,1);}
 }

My issue is with the Form button. You can see when you hover over it turns white and the text stays white as well. I'd like to have some contrast with the text when the hover happens.

In addition, I need to anchor link the button at the bottom of the page to the form. That may be another post.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.