Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
ss_qstns

Custom Landing Page Button CSS

Question

Posted (edited)

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?

Edited by ss_qstns
Initial Revision

Share this post


Link to post

2 answers to this question

Recommended Posts

  • 0
Posted (edited)

@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.

Edited by ss_qstns
Initial Revision

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...