[Resolved] Button with gradient background Mailchimp

[Sheree]

I have just implemented the code I found in the other thread and it looks great (thanks!) However, my mail chimp sign-up button does not have the new settings.

I would also like to change the button colour from orange to purple (##8327f4). This is selected in the customisation options but guessing I would need to add something into the CSS?

Mailchimp button is in the sidebar.

[Leo]

Hi there,

Edit this CSS:

a.button, #submit {
    border-radius: 25px;
    background: rgb(255, 183, 65);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(49%, rgba(255, 183, 65, 1)), to(rgba(214, 38, 38, 1)));
    background: linear-gradient(180deg, rgba(255, 183, 65, 1) 49%, rgba(214, 38, 38, 1) 100%);
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
    background-repeat: repeat-y;
    background-size: 100% 90px;
    background-position: 0 -30px;
}

To this:

a.button, input[type="submit"] {
    border-radius: 25px;
    background: rgb(255, 183, 65);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(49%, rgba(255, 183, 65, 1)), to(rgba(214, 38, 38, 1)));
    background: linear-gradient(180deg, rgba(255, 183, 65, 1) 49%, rgba(214, 38, 38, 1) 100%);
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
    background-repeat: repeat-y;
    background-size: 100% 90px;
    background-position: 0 -30px;
}

So you’d like to change the gradient color? If so you can tweak your gradient CSS using a site like this:
https://cssgradient.io/

[Sheree]

Amazing, thank you Leo! 🙂

[Leo]

No problem 🙂

[Author]

Posts