> For the complete documentation index, see [llms.txt](https://help.ecombe.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.ecombe.com/pages-and-section-creations/general/global-theme-styles/how-to-use-buttons-in-global-styles.md).

# How to use Buttons in Global styles

In this article we will guide you how to setup buttons style preset so that they can be reused and consistency across pages.

## What is Buttons

Buttons are a set of reusable button presets included in Global styles. They allow you to apply consistent button designs across all pages.\
There are three preset types available: **Primary**, **Secondary**, and **Tertiary** **buttons**.

<figure><img src="/files/OHjMNqrDcP8ttlKLCXFS" alt=""><figcaption></figcaption></figure>

## How to customize button style

Click any button to open its editing panel and change the style settings.&#x20;

Button style is divided into there types of settings: **Sizing**, **Border**, **Shadow** and **Hover.** The button updates in real time as you adjust the settings. You can hover over it to preview the hover effect directly inside Global styles.

<figure><img src="/files/6qYh7X0Ei3ZMi0HDmAl3" alt=""><figcaption></figcaption></figure>

#### Sizing

<table data-header-hidden><thead><tr><th width="144.49810791015625"></th><th></th></tr></thead><tbody><tr><td><strong>Font-size</strong></td><td>Determines how large or small the text appears inside the button.</td></tr><tr><td><strong>Letter spacing</strong> </td><td>Adjusts the distance between individual characters, making your text feel tighter or more open.</td></tr><tr><td><strong>Font-weight</strong></td><td>Controls how thick or thin the text appears, ranging from light to bold. It helps emphasize important content.</td></tr><tr><td><strong>Text transform</strong></td><td>Changes the letter casing of the text inside the button. You can convert all letters to <strong>uppercase</strong>, <strong>lowercase</strong>, or <strong>capitalize</strong> the first letter of each word.</td></tr><tr><td><strong>Height</strong></td><td>Adjust the height of the button.</td></tr><tr><td><strong>Side spacing</strong></td><td>Controls the horizontal space on the left and right sides of the button, helping you adjust how wide the button appears</td></tr><tr><td><strong>Corner radius</strong></td><td>Controls the roundness of the button’s corners, letting you choose between sharp edges and a softer, rounded look.</td></tr></tbody></table>

***

#### **Border**

**Thickness**: controls how thick or bold the border appears around the button.

***

#### Shadow

This part you adjust all shadow settings for the button.

<table data-header-hidden><thead><tr><th width="140.52532958984375"></th><th></th></tr></thead><tbody><tr><td><strong>Horizontal</strong></td><td>Adjusts the shadow’s left–right position.</td></tr><tr><td><strong>Vertical</strong></td><td>Adjusts the shadow’s top–bottom position.</td></tr><tr><td><strong>Blur</strong></td><td>Controls how soft or sharp the shadow appears.</td></tr><tr><td><strong>Transparent</strong></td><td>Controls how visible or faded the shadow looks.</td></tr></tbody></table>

***

#### Hover

**Transition:** controls how smoothly the button changes style when hover in it.

## **FAQ**

#### How do I change the font family of a button

The button's font family will be applied according to the Body Text's typography. To learn more about typography and how to change it, please refer to this [article](/pages-and-section-creations/general/global-theme-styles/how-to-use-typography-in-global-theme-style.md#how-to-customize-typography).

#### How can I change button style when I edit my page

You can click in to each button to open it editing panel to change styles.

<figure><img src="/files/5R2CEBLXMaQPphtaA2jI" alt=""><figcaption></figcaption></figure>

We hope this article helps you understand how to use Buttons feature in Global styles to customize button style presets and set consistent button style for your theme.

{% hint style="info" %}
Have a question?

Contact us via **in-app live chat**. We'll reply in few minutes.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://help.ecombe.com/pages-and-section-creations/general/global-theme-styles/how-to-use-buttons-in-global-styles.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.