How to add gradient fill to submit button?

Ask the community
, ,
6

I feel that this topic I posted a while back would allow you to create gradient buttons even within Wix Forms.

A Wix Studio site within the editor to showcase how you can use CSS with custom classes to add a gradient to Wix Forms.
A Wix Studio site within the editor to showcase how you can use CSS with custom classes to add a gradient to Wix Forms.1661×925 137 KB

/*button is the only necessary part so that you can target the buttons within the form*/
.custom-class button {
    background: linear-gradient(20deg,rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 55%, rgba(0, 255, 225, 1) 100%);
}

If you only want to target the submit button, you could use this code:

A website design featuring a jellyfish image, form elements like single choice options and a submit button, alongside code snippets displayed at the bottom. (Captioned by AI)
A website design featuring a jellyfish image, form elements like single choice options and a submit button, alongside code snippets displayed at the bottom. (Captioned by AI)1258×939 122 KB

Here’s the code for this;

.custom-class [data-hook="submit-button"] {
    background: linear-gradient(20deg,rgba(147, 116, 234, 1) 0%, rgba(82, 147, 243, 1) 55%, rgba(137, 234, 221, 1) 100%);
}