[Resolved] Button with gradient background Mailchimp

Home Forums Support Button with gradient background Mailchimp

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1129165
    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.

    #1129166
    Leo
    Staff
    Customer Support

    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/

    #1129176
    Sheree

    Amazing, thank you Leo! 🙂

    #1129223
    Leo
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.