# 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="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FHIPEZBhRJ5YDlGJIuu8J%2Fimage.png?alt=media&#x26;token=b16a1107-1bfa-4e50-bf5c-2864bc9b309d" 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="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FDWtQcCfC7epG3TjiK0Fd%2Fimage.png?alt=media&#x26;token=d11136be-a050-4495-a20a-8ebd72c1aba6" 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="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FHOvsIqMiWoDEe5GoOSWs%2Fimage.png?alt=media&#x26;token=ac7be773-6e1b-473e-b8c3-95064a862d07" 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="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2F7tTbEXB4cb80z6oFMb9m%2Fimage.png?alt=media&#x26;token=2f30f3a9-167e-43d2-85de-ef3ea1584277" alt=""><figcaption></figcaption></figure>
  * Ic**on only:** Displays only an icon, which you can change as desired.<br>

    <figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2F7wQajcBEwr49SdPPZJMU%2Fimage.png?alt=media&#x26;token=727bae7b-7834-493d-8c24-8fb75d6e83c9" alt=""><figcaption></figcaption></figure>
  * **Text only:** Displays only content, which you can adjust to fit your needs.<br>

    <figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2F7sup9HexOB5SSUY6B8kg%2Fimage.png?alt=media&#x26;token=90a2c46e-67a3-4ef7-9df4-982826ba71f7" alt=""><figcaption></figcaption></figure>
  * N**othing:** Displays neither content nor an icon.<br>

    <figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FWxHnAf6pLiOYDrjNY5cG%2Fimage.png?alt=media&#x26;token=fa453462-c524-42fc-a5b5-0f3e2be52c84" 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="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FWpLBvl4LnsTdl1369Z7c%2Fimage.png?alt=media&#x26;token=56de1739-98b4-4ad5-afa4-f574a2fa79b3" alt=""><figcaption></figcaption></figure>

* **Align:** Helps you align the button within its container. For more information, see details [<mark style="color:blue;">**here**</mark>](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/align).
* **Sizes:** Adjusts the size of the button, see details [<mark style="color:blue;">**here**</mark>](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/size).
* **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>](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/styles).
* **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>](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/typography).
* **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>](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/border).

### 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="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2F0hhtG9pP10QONp9xiZnr%2Fimage.png?alt=media&#x26;token=404053e9-bf60-42e6-bc2b-b1b94e1a2b68" 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).