How to make gradient color in a button?

Back to Forums

IQ78

Solved

Question

Mobile

Application Type

Mobile

Hi there,

I am wondering can we make a button in outsystems using gradient color, not solid, like this:

thanks

5 days ago

ABHIJITH G

Champion

Solution

Hi @IQ78 ,
You can create gradient buttons using custom CSS. For example, I added a new class to make the button gradient

After creating a new class, you can add it to the button you want to make gradient.
Hopes this help

Regards
Abhijith

See solution in context

5 days ago

Rupesh Patil

Solution

hi @IQ78

You can add new class btn-gradient and add this css:

.btn-gradient {

background: linear-gradient(90deg,#f6a000 0%,#e68600 40%,#cf6f00 75%,#b95f00 100%);

color: #fff;

border-radius: 10px;

padding: 24px;

text-align: center;

border: 0px;

width: 100%;

}

I hope this helps

Thanks

See solution in context

5 days ago

Huy Hoang The

Solution

You can add custom-class for button

and override color: backgound: linear-gardient()

See solution in context

5 days ago

ABHIJITH G

Champion

Solution

Hi @IQ78 ,
You can create gradient buttons using custom CSS. For example, I added a new class to make the button gradient

After creating a new class, you can add it to the button you want to make gradient.
Hopes this help

Regards
Abhijith

5 days ago

Rupesh Patil

Solution

hi @IQ78

You can add new class btn-gradient and add this css:

.btn-gradient {

background: linear-gradient(90deg,#f6a000 0%,#e68600 40%,#cf6f00 75%,#b95f00 100%);

color: #fff;

border-radius: 10px;

padding: 24px;

text-align: center;

border: 0px;

width: 100%;

}

I hope this helps

Thanks

5 days ago

Huy Hoang The

Solution

You can add custom-class for button

and override color: backgound: linear-gardient()

5 days ago

IQ78

Thank u, alls

5 days ago

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines