Styling Newsletter Form Button

Site URL: https://antelope-sturgeon-xd4r.squarespace.com/%20ATTN!!!IN%20DEVELOPMENT

Hi– 

(The site link won't work as I'm still developing it and it's set to private). I'm working on a site that includes the form pictured below. I'm able to style everything with CSS -except- the button's font size, text color & background color. See my code below – am I missing something???

Thank you!

.newsletter-form-button {
      vertical-align: center !important;
      padding-top: 13px !important;
      height: 45px !important;
      text-transform: uppercase !important;
      font-weight: 600 !important;
      letter-spacing: 1px !important;
      font-size: 12px !important;
      color: #ffffff !important; 
      background-color: #F2CBCB !important;
}

On 4/6/2022 at 4:43 AM, camfont said:

Site URL: https://antelope-sturgeon-xd4r.squarespace.com/%20ATTN!!!IN%20DEVELOPMENT

Hi– 

(The site link won't work as I'm still developing it and it's set to private). I'm working on a site that includes the form pictured below. I'm able to style everything with CSS -except- the button's font size, text color & background color. See my code below – am I missing something???

Thank you!

.newsletter-form-button {
      vertical-align: center !important;
      padding-top: 13px !important;
      height: 45px !important;
      text-transform: uppercase !important;
      font-weight: 600 !important;
      letter-spacing: 1px !important;
      font-size: 12px !important;
      color: #ffffff !important; 
      background-color: #F2CBCB !important;
}

if your site is not go-live. You can share it with the site wide password so I can take a look?

Oh I didn't know about this! Here you go: k5ut$YXZ53ZR!42

EDIT: Here is the actual website link: https://antelope-sturgeon-xd4r.squarespace.com/

Thanks!

On 4/14/2022 at 6:47 AM, camfont said:

Oh I didn't know about this! Here you go: k5ut$YXZ53ZR!42

EDIT: Here is the actual website link: https://antelope-sturgeon-xd4r.squarespace.com/

Thanks!

Add to Design > Custom CSS

/* Latest blog form */
div#block-yui_3_17_2_1_1649190699515_6868 span.newsletter-form-button-label {
    color: red;
    font-size: 12px;
}
div#block-yui_3_17_2_1_1649190699515_6868 button {
    background-color: #f1f !important;
}

Thank you tuanphan– sadly, now it looks like the attached image  😭

And I'd like it to look more like the image in the original post, except the button color should be #F2CBCB and the button text should be white. Here's all my code if it helps:

#block-yui_3_17_2_1_1649190699515_6868 {
  margin-top: 30px;
  background-color: #172936 !important;

   header {
    .newsletter-form-header-title { 
      font-size: 36px !important;
    }

    .newsletter-form-header-description {
      p { 
      font-size: 24px !important;
      }
    }
  }
}

  .newsletter-form-body {
    input.newsletter-form-field-element {
      width: 300px !important;
      height: 50px !important;
      font-size: 0.9rem !important;
      text-transform: uppercase;
      font-weight: 600;
      letter-spacing: 1px;
      text-align: center;
    }

.newsletter-form-button {
      vertical-align: center !important;
      padding-top: 13px !important;
      height: 45px !important;
      text-transform: uppercase !important;
      font-weight: 600 !important;
      letter-spacing: 1px !important;
      font-size: 12px !important;
      color: #ffffff !important; 
      background-color: #F2CBCB !important;
}

  }

div#block-yui_3_17_2_1_1649190699515_6868 span.newsletter-form-button-label {
    color: #ffffff !important;
    font-size: 12px;
}
div#block-yui_3_17_2_1_1649190699515_6868 button {
    background-color: #F2CBCB !important;
}

On 4/19/2022 at 2:50 AM, camfont said:

Thank you tuanphan– sadly, now it looks like the attached image  😭

And I'd like it to look more like the image in the original post, except the button color should be #F2CBCB and the button text should be white. Here's all my code if it helps:

#block-yui_3_17_2_1_1649190699515_6868 {
  margin-top: 30px;
  background-color: #172936 !important;

   header {
    .newsletter-form-header-title { 
      font-size: 36px !important;
    }

    .newsletter-form-header-description {
      p { 
      font-size: 24px !important;
      }
    }
  }
}

  .newsletter-form-body {
    input.newsletter-form-field-element {
      width: 300px !important;
      height: 50px !important;
      font-size: 0.9rem !important;
      text-transform: uppercase;
      font-weight: 600;
      letter-spacing: 1px;
      text-align: center;
    }

.newsletter-form-button {
      vertical-align: center !important;
      padding-top: 13px !important;
      height: 45px !important;
      text-transform: uppercase !important;
      font-weight: 600 !important;
      letter-spacing: 1px !important;
      font-size: 12px !important;
      color: #ffffff !important; 
      background-color: #F2CBCB !important;
}

  }

div#block-yui_3_17_2_1_1649190699515_6868 span.newsletter-form-button-label {
    color: #ffffff !important;
    font-size: 12px;
}
div#block-yui_3_17_2_1_1649190699515_6868 button {
    background-color: #F2CBCB !important;
}

 

Hi,

You want

• Button background: #F2CBCB
• Button text color: white
• Button under Email address field
• Center Email input + button

Is this right?

Tuanphan– Correct! That's exactly what I'd like 🙂

On 4/27/2022 at 5:34 AM, camfont said:

Tuanphan– Correct! That's exactly what I'd like 🙂

TO make button under input, add this to Design > Custom CSS

div#block-yui_3_17_2_1_1649190699515_6868 .newsletter-form-body {
    display: flex;
    flex-direction: column;
}

Thank you, tuanphan – that did center the button. But what about the other three styling issues:

• Button background: #F2CBCB
• Button text color: white
• Center Email input + button

Thanks!!!

On 5/4/2022 at 12:42 AM, camfont said:

Thank you, tuanphan – that did center the button. But what about the other three styling issues:

• Button background: #F2CBCB
• Button text color: white
• Center Email input + button

Thanks!!!

I see you solved