# Button block

Source: https://themes.spicydesign.ca/help/reference/blocks/button/
Updated: 2026-11-12

A button or link with its own label, style and destination. Settings for the Button block in the Picante Shopify theme.


A button or link with its own label, style and destination.

**Where to find it:** open any section sidebar that accepts theme blocks, choose **Add block**, then pick **Button**.

The same block in the three themes:

![The Button block in the Picante style.](https://themes.spicydesign.ca/help/shots/block-button--picante.webp)

![The Button block in the Overdrive style.](https://themes.spicydesign.ca/help/shots/block-button--overdrive.webp)

![The Button block in the Pastille style.](https://themes.spicydesign.ca/help/shots/block-button--pastille.webp)

When you add this section, it starts from the **Button** preset.

## Settings

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Label | Text | Shop now |  |  |
| Link | Link |  |  |  |
| Style | Select | Solid | Solid, Outline, Text link |  |
| Size | Select | Medium | Small, Medium, Large |  |
| Icon | Select | Arrow up right | None, Arrow up right, Arrow right, Arrow down, Plus, Play, Cart, Flame, Sparkle |  |
| Button follows the pointer | Checkbox | On |  | The button leans toward the pointer on hover. |

### Size

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Alignment | Text alignment | left | Left, center, right |  |
| Width | Select | Fit content | Fit content, Fill, Custom |  |
| Custom width | Slider | 50 % | 10 to 100 %, step 5 | Shown when **Width** is Custom. |
| Max width | Select | None | None, Narrow, Normal, Wide |  |

### Padding

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Customize padding | Checkbox | Off |  | Padding settings stay visible while any side has padding. Set a side to 0px to remove its padding. |
| Top padding | Slider | 0 px | 0 to 100 px, step 2 | Shown when **Customize padding** is on or **Top padding** is on or **Bottom padding** is on or **Left padding** is on or **Right padding** is on. |
| Bottom padding | Slider | 0 px | 0 to 100 px, step 2 | Shown when **Customize padding** is on or **Top padding** is on or **Bottom padding** is on or **Left padding** is on or **Right padding** is on. |
| Left padding | Slider | 0 px | 0 to 100 px, step 2 | Shown when **Customize padding** is on or **Top padding** is on or **Bottom padding** is on or **Left padding** is on or **Right padding** is on. |
| Right padding | Slider | 0 px | 0 to 100 px, step 2 | Shown when **Customize padding** is on or **Top padding** is on or **Bottom padding** is on or **Left padding** is on or **Right padding** is on. |

### Motion

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Animation on scroll | Select | Theme default | Theme default, None, Fade, Slide up, Scale in, Wipe, Blur in |  |