Archived topic
Button with gradient background Mailchimp
3 replies · Started by Sheree on January 11, 2020
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.
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/
Amazing, thank you Leo! :)
No problem :)