---
title: "Button element"
date: "2018-11-30T11:25:42+00:00"
summary: "Enhance your website's interactivity with the Button element. Learn how to add, customize, and style buttons for various functions like scrolling, modal triggers, and more. Perfect for marketers and developers looking to improve user experience."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/button-element"
id: "5475f032-1d87-4043-b8ad-0dca74f53261"
---

Table of contents will be added

Use the Button element to add a button <button> to your layout.

Locating the button element
---------------------------

To find the Button element:

1.  Navigate to a component or a template with the Layout canvas
2.  Click the **+ button** on the Layout canvas
3.  Within the Elements tab, look for the Button element.

![6612fa91-button-element.png](https://acquia.widen.net/content/f2eb1059-9094-4b65-b572-ef8c7be9b88f/web/6612fa91-button-element.png)

The Button element includes the following fields:

Interaction
-----------

*   **Button text** \- Add text to show on the Button
*   **Title attribute** - Add a title attribute 
*   **Type** - Select the type of button
    *   **Back to top -** Add a smooth scroll back to the top of the page
    *   **Scroll to -** Add a smooth scroll to a jQuery selector
        *   Scroll target - Enter a jQuery selector to target an element to scroll to.
        *    Scroll duration - Enter the time it will take for the scroll to complete in milliseconds.
        *   **Offset type**
            *   Offset against element - Offset the top of completed scroll position by the height of an element. Target the element using a jQuery selector.
            *   Offset in PX - Offset the top of completed scroll position in pixels.
        *   **Modifier and/or jQuery animation -** Toggle, add or remove a modifier class on an element using on-click. For more information, see [Add on-click interactivity to elements](/drupal-starter-kits/add-ons/site-studio/add-click-interactivity-elements "Add on-click interactivity to elements")
        *   **Open modal** - Link to open a modal
            *   **Trigger ID** - Enter the ID of the modal trigger, this is the ID of this element  
                Adding a trigger ID will allow for the focus will return to the body when the modal closes. 
            *   **Modal ID** - Enter the ID of the modal to open

Custom style
------------

*   **Button style -** Apply a Button custom style. For more information, see [Creating custom styles](/drupal-starter-kits/add-ons/site-studio/creating-custom-styles "Creating custom styles").

Match heights
-------------

*   **Match heights** \- Match the height of the element using:
    *   **None** - Removes the match heights at the specific breakpoint
    *   **Class** \- Match the height of the element with another element with the same class name
    *   **Children with class** - Match the heights of any child elements with the same class name
    *   **Child element** - Match the heights of all child elements of the same type.

For more information on Match heights, see [Match the heights of elements.](/drupal-starter-kits/add-ons/site-studio/match-heights-elements "Match the heights of elements")

Comments
--------

*   **Add comments -** Add comments to the Element.  For more information, see [Adding comments to an element](/drupal-starter-kits/add-ons/site-studio/adding-comments-element "Adding comments to an element").