Customizing the newsletter button on your Squarespace website can give it a more personalized and professional look. By default, Squarespace provides a standard button for newsletter forms.
However, with a little bit of CSS (Cascading Style Sheets) knowledge, you can change the appearance of the button to match your brand and make it stand out on your website.
In this guide, we will walk you through the process of customizing the Squarespace newsletter button, including how to change the color, size, and shape of the button.
By the end of this guide, you will have a newsletter button that is tailored to your brand and stands out on your website. This guide will require you to access the CSS editor in your Squarespace account, so make sure you have the necessary permissions and a basic understanding of CSS.
How to Customize Squarespace Newsletter Button?
To customize the Squarespace newsletter button using CSS, you will need to access the CSS Editor in your Squarespace account and add custom CSS code. The following is an example of how to change the color, size, and shape of the button using CSS.
Change the color of the button:
/* This CSS code changes the background color of the button to blue */
.newsletter-form-button {
background-color: blue;
}Change the size of the button:
/* This CSS code changes the width and height of the button to 50px */
.newsletter-form-button {
width: 50px;
height: 50px;
}Change the shape of the button:
/* This CSS code changes the button to a round shape */
.newsletter-form-button {
border-radius: 50%;
}It’s important to note that in order to target the specific newsletter button that you want to customize, you need to select the correct class or id of the button. The class or id of the button can be found by using the browser developer tools. Once you have the correct class or id, you can add it to the CSS code, like this:
/*This is an example of targeting a specific button by its class*/
.my-custom-class .newsletter-form-button {
/*your css code here*/
}You can also target the specific button by its id:
/*This is an example of targeting a specific button by its id*/
#my-custom-id .newsletter-form-button {
/*your css code here*/
}You can also chain multiple CSS properties together to create a more advanced custom design.
/* This CSS code changes the background color of the button to blue and size to 50px*/
.newsletter-form-button {
background-color: blue;
width: 50px;
height: 50px;
border-radius: 50%;
}It’s important to test your changes and make sure that they look good in all screen sizes and devices.
Change the Newsletter Block Button Color
Here is the complete CSS code for the newsletter button that you can use. You change the value of color to customize according to your site design.
.newsletter-form-button {
color: #7cccbd !important;
border-radius: 0px !important;
transition: all ease-in-out 700ms !important;
-webkit-transition: all ease-in-out 700ms !important;
-moz-transition: all ease-in-out 700ms !important;
background-size: 100% 200%;
background-color: transparent !important;
background-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #fac827 50%) !important;
}
.newsletter-form-button:hover {
color: #fac827 !important;
background-position: 0 100% !important;
}
If you want to change the button shape to rounded or pill then simply add the border-radius like this:
.newsletter-form-button {
border-radius: 50px;
}Similarly, you can also change the size of the button.
button.newsletter-form-button.sqs-system-button {
padding-top: 10px !important;
padding-bottom: 10px !important;
}Change the Newsletter Form Field
Just like the button customization, you can also change the fields. For example, if you want to make the form field into rounded shapes then use the following CSS.
.newsletter-form-field-element {
border-radius: 50px;
}In order to change the size of the form field, you simply need to apply the padding-top and padding-bottom.
.sqs-block-newsletter .newsletter-form-field-element {
padding-top: 10px !important;
padding-bottom: 10px !important;
}Conclusion
I hope that now you are well aware of customizing the Squarespace Newsletter Button with the help of CSS? In conclusion, customizing the Squarespace newsletter button using CSS is a great way to give it a more personalized and professional look. With a little bit of CSS knowledge, you can change the color, size, and shape of the button to match your brand.