> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://ajuda.greatsoftwares.com.br/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to create a COLOR GRADIENT EFFECT on a site BUTTON

To create a **color gradient effect on a button** of your page, follow the steps below:

1. Access your page editor;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/click-desing_pxyeme.png)

2. In the side menu, click on **Guia de estilos** located on the left side of the screen and click on "**Adicionar**" in the Saved colors section;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_dl40dd.png)

3. In the menu that opens, give your **color** a name, and click where the **HEX** code of the color is;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1beixol.png)

4. In the next menu click on **"**Gradient**"**;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1tlm6dc.png)

5. Then, **style** it however you like;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1svk32p.png)

6. Next, you will need to click on "E**dit**" on the desired button and find the "Button color" section;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_c8gc8u.png)

7. In this new menu that appears, scrolling down the screen your saved colors will show up, select the one you want;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_wz7ws6.png)

8. After that, your button will look like this:

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1ckz097.png)

Still have questions? Reach out to our team on Chat! We're always happy to help. :-D