Buttom with Gradient background

Hi there,

for all buttons you could so something like this - i even added a simple hover effect :) :

a.button {
    border-radius: 25px; /*adjust accordingly */
    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;
}

a.button:hover {
    background-position: 0 0;
}

And for creating linear gradients, this site is great:

https://cssgradient.io

Wow, that´s great! Thanks!
And how can I change the squares into round?

I edited the code above to include the border-radius property. Just increase the px or change it to % to suit

Thanks!!

You're welcome

how to apply the code to the entire site? (does not work for comment button)

Hi there,

you would need to add another selector to the CSS.

First CSS Rule
1st line change this a.button to a.button, #submit

Second CSS Rule
1st line change this a.button:hover to a.button:hover, #submit:hover

You have the best technical support I've ever seen! Thank you!

Glad that we can be so helpful :)

I have just implemented this code 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?

Any chance you can open a new topic and link us to the page in question?

It's likely that MailChimp has their own button styles.

Thanks Leo, will do it now :)

No problem :)