---
title: "Change Button Styles"
slug: "changing-button-styles-1"
updated: 2026-05-13T16:12:41Z
published: 2026-05-27T14:03:43Z
canonical: "documentation.prc-saltillo.com/changing-button-styles-1"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.prc-saltillo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Change Button Styles

There are several ways to change the way buttons look in a vocabulary.

## Resize a Button

You can make a button appear larger or smaller.

1. Select **Menu** and **Edit Page**.
2. Select the button you want to resize and select **Change Button Size**.
3. Select the number of rows and columns you want.
4. Select **Save**. Select **Done** to exit edit mode.

---

## Change a Button Style

1. Select **Menu** and **Edit Page**.
2. Select the button you want to modify and select **Edit This Button**.
3. Scroll down to the area you want to edit.
4. Edit the font, font size, text color, body color, border color, and/or border width as needed.
5. Select **Save** and **Done**.

---

## Change Basic Colors on a Button

Basic colors are the color options that are shown in the Default tab of the Select Color menu.

1. Select **Menu** and **Edit Page**.
2. Select the button you want to modify and select **Edit This Button**.
3. Scroll down to the color settings and select **Text Color**, **Body Color**, or **Border Color**.
4. The Select Color window opens to the Default tab.
5. Select the color you want and select **Save**.

---

## Customize Colors on a Button

The Select Color Window’s Custom tab provides a variety of ways to select colors. Use the method that works best for you.

1. Select **Menu** and **Edit Page**.
2. Select the button you want to modify and select **Edit This Button**.
3. Scroll down to the color settings and select **Text Color**, **Body Color**, or **Border Color**. The Select Color window will open to the Default tab.
4. Select the **Custom** tab. Then select **Grid**, **Spectrum**, or **Sliders** to use any of the available features to select a color. After you select and apply a color, select **Save** and then **Done**.

### Select a Color from the Grid Tab or Spectrum Tab

![](https://cdn.document360.io/7e1d5036-9a43-443d-8ea7-a17280ea302d/Images/Documentation/App-CustomColors01-GridSpectrumTabs-en-us.png?sv=2026-02-06&spr=https&st=2026-11-02T18%3A16%3A48Z&se=2026-11-02T19%3A16%3A48Z&sr=c&sp=r&sig=XKxF4XOkem33WSSYMOWM5N2ugIXUZGS8OXQClRYvjgQ%3D)

Tap in the color gradient. The cursor will move to the spot you tapped, and the preview box will show the current color. If necessary, tap different areas until the color you want is shown.

**Tip:** You can also use a finger to drag the cursor to areas of the color gradient.

If you want to save the color that appears in the preview box for future use, tap the ![](https://cdn.document360.io/7e1d5036-9a43-443d-8ea7-a17280ea302d/Images/Documentation/Unity-CustomColors03-Grid-plussign-en-us.png?sv=2026-02-06&spr=https&st=2026-11-02T18%3A16%3A48Z&se=2026-11-02T19%3A16%3A48Z&sr=c&sp=r&sig=XKxF4XOkem33WSSYMOWM5N2ugIXUZGS8OXQClRYvjgQ%3D) symbol . A new color circle will appear. At any time, you can select and apply that color.

![](https://cdn.document360.io/7e1d5036-9a43-443d-8ea7-a17280ea302d/Images/Documentation/Unity-CustomColors04-Grid-SaveColors-en-us(1).png?sv=2026-02-06&spr=https&st=2026-11-02T18%3A16%3A48Z&se=2026-11-02T19%3A16%3A48Z&sr=c&sp=r&sig=XKxF4XOkem33WSSYMOWM5N2ugIXUZGS8OXQClRYvjgQ%3D)

When the preview box shows the color you want, select **OK** in the upper right corner. The color will be applied to the selected area of the button.

### Select a Color from the Sliders Tab

![](https://cdn.document360.io/7e1d5036-9a43-443d-8ea7-a17280ea302d/Images/Documentation/App-CustomColors06-SlidersTab-en-us.png?sv=2026-02-06&spr=https&st=2026-11-02T18%3A16%3A48Z&se=2026-11-02T19%3A16%3A48Z&sr=c&sp=r&sig=XKxF4XOkem33WSSYMOWM5N2ugIXUZGS8OXQClRYvjgQ%3D)

**If you know the RGB (red green blue) code for the color you want:**

Using a finger, slide the cursor along each color bar until you numbers on the right reach the values you want. The preview box will show the current color.

**If you know the hex code for the color you want:**

Tap the hex code at the bottom of the preview box. When a keyboard opens, delete the hex code and enter the code you want. The preview box will show the color. Close the keyboard.

![](https://cdn.document360.io/7e1d5036-9a43-443d-8ea7-a17280ea302d/Images/Documentation/Unity-CustomColors07-HexCode-en-us(1).png?sv=2026-02-06&spr=https&st=2026-11-02T18%3A16%3A48Z&se=2026-11-02T19%3A16%3A48Z&sr=c&sp=r&sig=XKxF4XOkem33WSSYMOWM5N2ugIXUZGS8OXQClRYvjgQ%3D)

---

## Increase the Button Margin

You can add more space between buttons by increasing the Button Margin in the settings.

1. Select **Menu** > **Settings** and scroll to the Buttons section.
2. Select **Button Margin**.
3. Select a margin size. The default size is None. To increase the margin, select an option between 1 Point and 100 Point.
4. When you make a selection, the space between buttons changes.

![An example of a page shows the effect of the Button Margin option being set to 30 Point.](https://cdn.document360.io/7e1d5036-9a43-443d-8ea7-a17280ea302d/Images/Documentation/changing-button-styles-image-kc25scyr.png?sv=2026-02-06&spr=https&st=2026-11-02T18%3A16%3A48Z&se=2026-11-02T19%3A16%3A48Z&sr=c&sp=r&sig=XKxF4XOkem33WSSYMOWM5N2ugIXUZGS8OXQClRYvjgQ%3D)
5. If you selected too much space or too little space, make another selection.
6. When you are satisfied with the amount of space, select ![](https://cdn.document360.io/7e1d5036-9a43-443d-8ea7-a17280ea302d/Images/Documentation/image(15).png?sv=2026-02-06&spr=https&st=2026-11-02T18%3A16%3A48Z&se=2026-11-02T19%3A16%3A48Z&sr=c&sp=r&sig=XKxF4XOkem33WSSYMOWM5N2ugIXUZGS8OXQClRYvjgQ%3D).