Newsletter block - Underline form fields and button hover effects

.newsletter-form-field-element {
  background: transparent !important;
  border: none !important;
  border-bottom: 3px solid #333333 !important;
}

.sqs-alternate-block-style-container .newsletter-block .newsletter-form-wrapper .newsletter-form-button:hover{
  background: #e3b192 !important;
  border: 1px solid #e3b192 !important;
}

code breakdown:

.newsletter-form-field-element { targets the form fields (name, last name and email).

background: transparent !important; allows us to remove the background, completely making it transparent.

border: none !important; allows us to remove the border originally added within the newsletter block.

border-bottom: 3px solid #333333 !important; allows us to add a border only to the bottom of the box. “3px” shows the width of the bottom border. If we want a thinner line, this number must be smaller, or if you want it thicker, this number needs to be greater. “solid” allows us to have a solid line. “#333333” is the color we want the line to be.

} Allows us to close the styling for this specific class.

.sqs-alternate-block-style-container .newsletter-block .newsletter-form-wrapper .newsletter-form-button:hover{ Allows us to target the hover effect of the button within the newsletter block.

background: #e3b192 !important; allows us to change the background color of the button when hovering over it.

border: 1px solid #e3b192 !important; Allows us to change the color of the border of the button on hover.

} Closes all styling for this specific area of the newsletter block style.