> For the complete documentation index, see [llms.txt](https://docs.shopone.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.shopone.io/english/basic-elements/basic-widgets/button.md).

# 2.2. Button

The **Button widget** allows you to add and customize buttons on your landing page, enabling users to perform actions such as submitting forms, accessing links, or interacting with other parts of the website.

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

* Place **buttons** in strategic locations, such as at the top of the page, at the bottom, or near key content to attract attention.&#x20;
* Use bold and clear colors to make buttons easily visible.&#x20;
* Ensure the **button** is large enough to be easily clicked, especially on mobile devices.&#x20;
* Label the button with clear and action-oriented words like “Sign Up,” “Buy Now,” or “Learn More.”

## **1.** Add a Button to the Landing Page

* Click on **Widgets** in the sidebar of the editor.
* Select **Button** from the **Basic** section.
* Choose the **Button** element and drag it onto your landing page.

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

## **2.** Button Editor

### **2.1.** Content Editor

To access the **Content Editor**, click on the **Button** widget you wish to modify on the screen and select **Content** from the quick settings bar.

<figure><img src="/files/0tvcw1Z6W7Tm6LkoYep1" alt=""><figcaption></figcaption></figure>

* **Change what displays:**
  * **Text and icon:** Displays both content and an icon. You can customize the content, change the icon, adjust the display direction, and set the spacing between elements.<br>

    <figure><img src="/files/1AsuNUh165TJvhQCP1OV" alt=""><figcaption></figcaption></figure>
  * Ic**on only:** Displays only an icon, which you can change as desired.<br>

    <figure><img src="/files/WarjGlkLVILzNkKqkRdK" alt=""><figcaption></figcaption></figure>
  * **Text only:** Displays only content, which you can adjust to fit your needs.<br>

    <figure><img src="/files/ZJaRqJ7QO97WhaBrPdEV" alt=""><figcaption></figcaption></figure>
  * N**othing:** Displays neither content nor an icon.<br>

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

### 2.2. Design Editor

To access the **Design Editor**, click on the **Button** widget you wish to modify on the screen and select **Design** from the quick settings bar.

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

* **Align:** Helps you align the button within its container. For more information, see details [<mark style="color:blue;">**here**</mark>](/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/align.md).
* **Sizes:** Adjusts the size of the button, see details [<mark style="color:blue;">**here**</mark>](/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/size.md).
* **Display on:** Determines which devices the button will be displayed on, including Desktop and Mobile.
* **Styles:** Allows you to change the background color and shadow effects of the selected button, see details [<mark style="color:blue;">**here**</mark>](/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/styles.md).
* **Typography:** Customize the text display on the button, including font, font size, line height, letter spacing, font weight, and style, see details [<mark style="color:blue;">**here**</mark>](/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/typography.md).
* **Border:** Allows you to add and customize the border around the button, and you can also adjust the roundness of the corners, see details [<mark style="color:blue;">**here**</mark>](/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/border.md).

### 2.3. Advanced Editor <a href="#id-2.3.-advanced-editor" id="id-2.3.-advanced-editor"></a>

To access the **Advanced Editor**, click on the **Button** widget you wish to modify on the screen and select **Advanced** from the quick settings bar.

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

* **Events:** Allows you to set events for click or hover actions on the widget, see details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/event).
* **Animation**: Allows you to add dynamic animations to the widget on your landing page to make it more attractive and lively, see details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/animation).
* **Desktop/Mobile sync design**: Allows you to set synchronization options for the design between desktop and mobile, see details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/desktop-mobile-sync-design).
* **Position type**: Lets you choose the appropriate positioning style to optimize the webpage and provide the best experience for users, see details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/position-type).
* **Custom advance**: Allows you to customize the appearance and behavior of the component using CSS layers and custom CSS code, see details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/custom-advance).