[Resolved] Buttom with Gradient background

[Jagoba]

Hi,

I would like to have buttoms with a gradient background made of 2 different colors, I guess it must be possible as it is very common nowadats, but I do not know how to do it.
Could you please help me?

Many thanks,
Maca.

[David]

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

[Jagoba]

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

[David]

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

[Jagoba]

Thanks!!

[David]

You’re welcome

[ivar]

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

[David]

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

[ivar]

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

[David]

Glad that we can be so helpful 🙂

[Sheree]

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?

[Leo]

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.

[Sheree]

Thanks Leo, will do it now 🙂

[Leo]

No problem 🙂

[Author]

Posts