Button outline gradient

[ifkda]

Hi,

Is it possible to make the outline of a button have a gradient of two colours?

Thanks

[thai]

Hi There,

It’s possible with the custom CSS. Please add the following CSS under Theme Options > CSS:

a.x-btn.my-button.x-btn-large {
    background: rgba(42,127,187,1);
    background: -moz-linear-gradient(left, rgba(42,127,187,1) 20%, rgba(42,127,187,1) 31%, rgba(72,154,212,1) 54%, rgba(90,169,226,1) 88%, rgba(90,169,226,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(20%, rgba(42,127,187,1)), color-stop(31%, rgba(42,127,187,1)), color-stop(54%, rgba(72,154,212,1)), color-stop(88%, rgba(90,169,226,1)), color-stop(100%, rgba(90,169,226,1)));
    background: -webkit-linear-gradient(left, rgba(42,127,187,1) 20%, rgba(42,127,187,1) 31%, rgba(72,154,212,1) 54%, rgba(90,169,226,1) 88%, rgba(90,169,226,1) 100%);
    background: -o-linear-gradient(left, rgba(42,127,187,1) 20%, rgba(42,127,187,1) 31%, rgba(72,154,212,1) 54%, rgba(90,169,226,1) 88%, rgba(90,169,226,1) 100%);
    background: -ms-linear-gradient(left, rgba(42,127,187,1) 20%, rgba(42,127,187,1) 31%, rgba(72,154,212,1) 54%, rgba(90,169,226,1) 88%, rgba(90,169,226,1) 100%);
    background: linear-gradient(to right, rgba(42,127,187,1) 20%, rgba(42,127,187,1) 31%, rgba(72,154,212,1) 54%, rgba(90,169,226,1) 88%, rgba(90,169,226,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a7fbb', endColorstr='#5aa9e2', GradientType=1 );
}

After that add the my-button class to your buttons. Here is the link to generate the gradient background: https://www.cssmatic.com/gradient-generator.

Hope it helps