# Button

![](https://3485648446-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mg4EFSJWK87Ea9WGnlp%2F-MgANEblJSgJ1GRxrVxd%2F-MgANPlUBfL5OId6YnUP%2FButton.webp?alt=media\&token=6fe268fe-08e3-4a7c-9d79-19581d9110aa)

In this button element you can find below these settings to control the button look and behavior.

## **Content Tab** <a href="#content-tab" id="content-tab"></a>

### **Button** <a href="#button" id="button"></a>

* **Button Text:** Enter the Button Text
* **Link:** Enter the url/link
* **Icon or Image:** Here you have a list of the entire collection of Font Awesome icons as well as other icon.
* **Icon Position:** Set the icon to appear before or after the button text.
* **Icon** **Spacing**: Adjust the amount of space between the icon and the button text.
* **Size**: Select the preset button sizes, from Extra Small to Extra Large (see padding default details at the bottom of this document)
* **Margin**: Set the section Margin
* **Padding**: Set the section Padding
* **Display Inline:** Check to display inline multiple button.

#### Wrapper Link <a href="#wrapper-link" id="wrapper-link"></a>

Set the[ ](https://ultraaddons.com/elements-and-layout-widgets/ultraaddons-elements/button)[Wrapper Link](https://ultraaddons.gitbook.io/ultraaddons-elementor-pro/features/extensions/wrapper-link) that are applicable to this widget.

#### Hover Effect <a href="#hover-effect" id="hover-effect"></a>

Set the[ ](https://ultraaddons.com/elements-and-layout-widgets/ultraaddons-elements/button)[Hover Effect](https://ultraaddons.gitbook.io/ultraaddons-elementor-pro/features/extensions/hover-effect) that are applicable to this widget.

## Style Tab <a href="#style-tab" id="style-tab"></a>

### Button <a href="#button-1" id="button-1"></a>

* **Alignment:** Align the content to the left, right, center or justified
* **Typography:** Choose custom to change the typography, just like with the title.
* **Text Color:** Change the color of the text.
* **Background Type**: Choose between [Classic](https://elementor.com/help/how-to-change-the-background-image/) or [Gradient](https://elementor.com/help/gradient-background/).
* **Border Type**: Select the type of border to use around the button
* **Border Color**: Choose the border’s color
* **Border Width**: Control the thickness of the border around the button
* **Border** **Radius**: Set the border radius to control corner roundness
* **Box Shadow**: Adjust box shadow options
* **Button Class:** set custom class for controlling by css.

#### Transform <a href="#transform" id="transform"></a>

Set the[ ](https://ultraaddons.com/elements-and-layout-widgets/ultraaddons-elements/button)[Transform](https://ultraaddons.gitbook.io/ultraaddons-elementor-pro/features/extensions/transform) that are applicable to this widget.

#### Background Overlay <a href="#background-overlay" id="background-overlay"></a>

Set the[ ](https://ultraaddons.com/elements-and-layout-widgets/ultraaddons-elements/button)[Background Overlay](https://ultraaddons.gitbook.io/ultraaddons-elementor-pro/features/extensions/background-overlay) that are applicable to this widget.

## Advanced Tab <a href="#advanced-tab" id="advanced-tab"></a>

Set the [Advanced options](https://elementor.com/help/advanced-tab/) that are applicable to this widget