---
title: Button
description: "## Overview The **Button widget in SiteCraft** lets you create stylish and interactive buttons with multiple layout options. With 6 pre-designed layouts and full styling control, you can easily design call-to-action buttons that match your website’s look and feel. ---…"
url: "https://sitecraft.themeshala.com/docs/button/"
updated: "2026-04-18"
category: General Widgets
---

# Button

## Overview

The **Button widget in SiteCraft** lets you create stylish and interactive buttons with multiple layout options. With 6 pre-designed layouts and full styling control, you can easily design call-to-action buttons that match your website’s look and feel.

---

## Key Features

- 6 unique button layouts
- Custom text and link support
- Icon support (before/after text)
- Alignment control (left, center, right)
- Typography customization
- Background, border, and color controls
- Hover effects and transitions
- Fully responsive design

---

## How to Enable the Widget

Before using the Button widget, make sure it is enabled.

**Steps:**

1. Go to **SiteCraft → Dashboard → Widgets**
2. Find **Button Widget**
3. Toggle to enable it
4. Click **Save Changes**

[![](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/button-switcher.png)](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/button-switcher.png)

---

## How to Add the Widget in Elementor

1. Open your page with **Elementor Editor**
2. Search for **“Button”** under SiteCraft widgets
3. Drag and drop it into your section
4. Select a layout and start customizing

[![](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/button-el-scaled.png)](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/button-el-scaled.png)

---

## Content Settings

Control button content and structure.

[![](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/button-el-content-scaled.png)](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/button-el-content-scaled.png)

**Options:**

- **Text** – Enter button label
- **Link** – Add URL and target option
- **Layout** – Choose from 6 button styles
- **Icon** – Select icon and position (before/after text)
- **Alignment** – Left, Center, Right

---

## Style Settings

Customize the appearance of your button.

[![](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/button-el-style-scaled.png)](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/button-el-style-scaled.png)

**Available Controls:**

- **Typography** – Font, size, weight
- **Text Color** – Normal and hover states
- **Background Color** – Normal and hover
- **Border** – Width, style, radius
- **Padding** – Inner spacing
- **Icon Spacing** – Adjust gap between icon and text
- **Hover Effects** – Smooth transitions and animations

---

## Advanced Settings

Fine-tune layout and responsiveness.

[![](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/button-el-advanced-scaled.png)](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/button-el-advanced-scaled.png)

**Includes:**

- Margin & padding
- Responsive visibility
- Motion effects
- Positioning
- Background & border

---

## Use Cases

Perfect for:

- Call-to-action buttons
- Download links
- Contact buttons
- Promotional sections

---

## Result

You can now create attractive and fully customizable buttons using the **SiteCraft Button Widget**, with multiple layouts and interactive styles.