--- title: "Change Button Styles" slug: "changing-button-styles-2" updated: 2026-05-11T10:41:52Z published: 2026-05-27T14:03:43Z canonical: "documentation.prc-saltillo.com/changing-button-styles-2" --- > ## 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 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**. The Select Color window will open to the Default tab. 4. 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-02T22%3A06%3A24Z&se=2026-11-02T23%3A06%3A24Z&sr=c&sp=r&sig=otUyl%2Bv%2BaiZ99m0N%2BquMRZa8FyBcANJ5eWVUreBuiJM%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-02T22%3A06%3A24Z&se=2026-11-02T23%3A06%3A24Z&sr=c&sp=r&sig=otUyl%2Bv%2BaiZ99m0N%2BquMRZa8FyBcANJ5eWVUreBuiJM%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-02T22%3A06%3A24Z&se=2026-11-02T23%3A06%3A24Z&sr=c&sp=r&sig=otUyl%2Bv%2BaiZ99m0N%2BquMRZa8FyBcANJ5eWVUreBuiJM%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-02T22%3A06%3A24Z&se=2026-11-02T23%3A06%3A24Z&sr=c&sp=r&sig=otUyl%2Bv%2BaiZ99m0N%2BquMRZa8FyBcANJ5eWVUreBuiJM%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-02T22%3A06%3A24Z&se=2026-11-02T23%3A06%3A24Z&sr=c&sp=r&sig=otUyl%2Bv%2BaiZ99m0N%2BquMRZa8FyBcANJ5eWVUreBuiJM%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 spacing around the buttons changes. ![Graphical user interface, application Description automatically generated](https://cdn.document360.io/7e1d5036-9a43-443d-8ea7-a17280ea302d/Images/Documentation/changing-button-styles-image-0ii7k5ku.png?sv=2026-02-06&spr=https&st=2026-11-02T22%3A06%3A24Z&se=2026-11-02T23%3A06%3A24Z&sr=c&sp=r&sig=otUyl%2Bv%2BaiZ99m0N%2BquMRZa8FyBcANJ5eWVUreBuiJM%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-02T22%3A06%3A24Z&se=2026-11-02T23%3A06%3A24Z&sr=c&sp=r&sig=otUyl%2Bv%2BaiZ99m0N%2BquMRZa8FyBcANJ5eWVUreBuiJM%3D). --- ## 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**. 6. Select **Done** to exit edit mode. --- ## Copy/Paste a Button Style There are times when it might be faster to copy and paste a button style from an existing button rather than editing each of these items on a new button. 1. Select **Menu** and **Edit Page**. 2. Select the button whose style you want to copy. The Edit Button menu opens. 3. Select **Copy Button**. 4. Select the button you want to copy the style to. The Edit Button menu opens with additional options. 5. Select **Paste Button Style**. The button will display the pasted style. 6. Select **Done** to exit edit mode.