> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://docs.stylecloud.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to Create Buttons with Custom Styles for Your StyleCloud Website

Buttons are one of the most important design elements on any website. Whether you are prompting users to "Buy Now," "Learn More," or "Get Started," a well-designed button can significantly boost engagement and conversions. StyleCloud created blocks where buttons have custom styling, therefore when choosing a block with and it has custom styled button, it needed to edit manually, it will not automatically apply website's stylekit.
---

### How to Style the Button

In the **block settings panel** on the right sidebar, you will find all the customization options:
Make sure in button settings under Button Inherit Styles to choose **Outline**

**Colors**
* **Background Color**: Choose your brand’s primary color.
* **Text Color**: Make sure it contrasts well with the background.
* **Hover Colors**: Define how the button looks on hover for interactivity.

**Spacing & Sizing**
* Set **padding** (inside the button) and **margin** (outside spacing).
* Adjust **width** and **alignment** (left, center, full width).

**Borders & Radius**
* Set a **border style** (solid, dashed, etc.).
* Adjust **border-radius** to make buttons rounded or square.

**Typography**
* Choose a custom **font**, **size**, **weight**, and **letter spacing**.

![](https://storage.crisp.chat/users/helpdesk/website/-/4/b/4/3/4b432516dd882000/button-styling-2_5jj84g.png)
---


![](https://storage.crisp.chat/users/helpdesk/website/-/4/b/4/3/4b432516dd882000/button-styling_1at8fbt.png)