# Style a chat button

Buttons → a button → Style, Colors and Size and shape: make a chat button fit your page with its style, background, text, border and hover colours, size, width, corners and exact padding.

This is the Markdown version of https://www.meetdarwin.ai/help/buttons/style-a-chat-button, published by Darwin and generated on 27 October 2026.

Find it in Darwin: Buttons (https://app.meetdarwin.ai/admin/links?tab=buttons). Updated Oct 26, 2026.

A chat button starts from your chat's own colours and corners, so it matches the chat it opens. Change any of it on the button's page under **Buttons** in the sidebar. The preview beside the settings shows each change on a sample page.

1. **Pick a style**

   Open the button on **Buttons**. Under **Button**, choose a **Style** (2): **Brand** fills it with your brand colour, **Soft** uses a light tint, **Outline** draws only the edge, and **Text link** looks like a link. Picking a style puts its colours back, so pick the style first.

   _Screenshot: The Button section: Text marked 1, and the four styles Brand, Soft, Outline and Text link marked 2._

2. **Change the colours**

   **Colors** shows the four colours the button uses: **Background**, **Text**, **Border** (none until you select **Add a border**) and **Hover**, the colour when a visitor points at it. Select a swatch or type a colour code to change one.

   If the text is hard to read on the background, Darwin warns you and shows the contrast, aiming for 4.5:1.

   _Screenshot: Colors: Background #234F42, Text #FFFFFF, Border none with Add a border, and Hover #42685C._

3. **Set the size, width and corners**

   Under **Size and shape**, choose the **Size** (**Small**, **Medium** or **Large**), the **Width** (**Fit the text**, or **Full width** to fill the space you paste it into) and the **Corners** (**Like your chat**, **Square** or **Pill**). A **Text link** has no corners to set.

   _Screenshot: Size and shape: Size Medium, Width Fit the text, and Corners Like your chat._

4. **Fine-tune it (optional)**

   Choose **Custom** under **Size** or **Corners** for exact numbers. **Custom** then shows sliders for **Left and right padding** (0 to 64 px), **Top and bottom padding** (0 to 32 px), **Text size** (11 to 28 px) and, with custom corners, **Corner radius** (0 to 40 px). They start from the button as it is now, so nothing jumps.

   _Screenshot: Size set to Custom: the Custom row highlighted, with Left and right padding 18px, Top and bottom padding 15px and Text size 15px._

5. **Save, then paste the new code**

   Select **Save button** in the bar at the bottom. A new look needs the new code: copy it again with **Copy code** and paste it over the old one on your site.

   _Screenshot: The bar at the bottom of a button: Unsaved changes, Discard, and Save button highlighted._

## Good to know

- The colours start from your chat's colours on **Agent**. Change those there and buttons that keep the default colours follow. See [Make the chat look like your brand](https://www.meetdarwin.ai/help/agent/chat-appearance).
- A button's message and click behaviour update on your site as soon as you save; its text and look need the new code.

- [Add chat buttons to your website](https://www.meetdarwin.ai/help/buttons/chat-buttons): Make a button, choose what a click does and copy the code.
- [Change, remove and find your buttons](https://www.meetdarwin.ai/help/buttons/manage-your-buttons): Edit a saved button, search the list, or take one off your site.