> For the complete documentation index, see [llms.txt](https://aries-theme.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aries-theme.gitbook.io/docs/theme-settings/buttons.md).

# Buttons

Buttons control how calls‑to‑action look and feel. Clear, consistent buttons help customers notice actions, trust them, and click with confidence.

<figure><img src="https://2498163780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2LxG3rPCoA6sZo7ovFkR%2Fuploads%2Fey2utFuUIqIb8RfKR958%2FCapture%20d'%C3%A9cran%202025-09-01%20204612.png?alt=media&amp;token=8101cf58-14d8-43b5-95f8-59868add3f9c" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

#### How to set it up

* Go to **Online Store** > **Themes** > **Customize**.
* Open **Theme settings** > **Buttons**.
* Make your changes, preview live, then click **Save**.
  {% endhint %}

### Settings

#### Border

* **Thickness**: Sets the line weight of button borders. Use thicker borders for stronger emphasis.
* **Corner radius**: Rounds the button corners. Sharper corners feel modern; rounder feels friendly.

#### Animation

* **Animation style**: Chooses the button hover/interaction effect (None, Color swap, Slide‑in border, Scale effect). Subtle motion improves feedback without distraction.

#### Text

* **Text transform**: Controls capitalization (Uppercase, Capitalize, None). Keeps button labels consistent with your brand tone.
* **Size**: Changes the button text size. Larger improves visibility; smaller keeps layouts tidy.
* **Font type**: Uses either your Body or Heading font for button text. Match your brand style and readability.

#### Size

* **Size**: Adjusts padding (space between text and the border). More padding makes buttons feel bigger and more clickable.

***

### **Tips**

* Prefer subtle animations; avoid effects that feel jumpy on mobile.
* Test on mobile and desktop—watch for cramped text or oversized buttons.