Jump to content

How to change the Form Submit button color?

Recommended Posts

  • Replies 18
  • Views 99.6k
  • Created
  • Last Reply

Change the CSS for the button in custom CSS:


.form-wrapper input[type="submit"] {
 display: block;
 background: #aaa;
 color: #aaa;
 border: none;
 padding: 10px 20px;
 -moz-border-radius: 2px;
 border-radius: 2px;
 cursor: pointer;
}

Link to comment

Thank you! That definitely did it. I also needed to change the color of the button on hover, but I figured it out. For those that may see this later, here is the code I used to change the hover color:

.form-wrapper input[type=submit]:hover { background: #ffffb3; }

Thanks opo!

Link to comment
  • 3 months later...

I might be doing something wrong but I am copying the code above and pasting it in the custom CSS section. The color I want for my submit button is #0dd39d


.form-wrapper input[type="submit"] {
 display: block;
 background: #0dd39d;
 color: #0dd39d;
 border: none;
 padding: 10px 20px;
 -moz-border-radius: 2px;
 border-radius: 2px;
 cursor: pointer;
}

What am I doing wrong?

Link to comment

Yellow submit button:


.sqs-block.form-block .form-wrapper input[type=submit], 
.sqs-lightbox.form-lightbox
.form-wrapper input[type=submit] {
 display: block; background-color:#ffffb3; 
}

Link to comment
  • 3 weeks later...

@Timo, here is what worked for me, this changes the color of the lightbox button and also on hover:


.sqs-block-content .lightbox-handle {
 color: #FFF;
 font-weight: 400;
 background: #0099FF;
}

.sqs-block-content .lightbox-handle:hover {
 color: #000;
 font-weight: 400;
 background: #0066FF;
}

For those unfamiliar with the lightbox mode for forms, this option is under the Advanced tab in Forms and works well for longer forms.

Link to comment
  • 6 months later...

thanks for this, very useful. This is possible for all the buttons on the site actually, using different CSS. It's good to create your own styling here as the buttons are on key styling element that says 'Squarespace' along with the social icons and 'love heart' button on the blog posts.

Link to comment

thanks for this, very useful. This is possible for all the buttons on the site actually, using different CSS. It's good to create your own styling here as the buttons are on key styling element that says 'Squarespace' along with the social icons and 'love heart' button on the blog posts.

Link to comment
  • 5 years later...

Hi @Kirk, I made a video tutorial for you on how to Change Form Submit Button Color on Squarespace Tutorial. Hope this helps! https://www.askquesty.com/post/change-form-submit-button-color-squarespace

Have Squarespace questions/task and need help today? **You can hire us here.** Our answers are on-demand, video recorded, and only cost between $5 to $25. Estimates are free, 100% satisfaction guarantee, and trusted by hundreds of small businesses.

Link to comment
  • 7 months later...
  • 6 months later...
On 1/27/2013 at 10:50 PM, opo said:

Change the CSS for the button in custom CSS:



 

.form-wrapper input[type="submit"] {
 display: block;
 background: #aaa;
 color: #aaa;
 border: none;
 padding: 10px 20px;
 -moz-border-radius: 2px;
 border-radius: 2px;
 cursor: pointer;
}

 

 

 

This worked like a charm for me. Using "Avenue" Template.

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.