Buttons

Every button in Vellure shares one size and shape, set here. Button colors are part of each color scheme, so a button always matches the section it sits in. See Colors.

Open it from Theme settings (the gear icon at the top left of the editor) → Buttons.

Size and shape (both buttons)

These apply to both the filled (primary) and the outlined (secondary) button.

Setting	Description
Vertical padding	The space above and below the label (6–30px). Together with the font size it sets the button's height.
Horizontal padding	The space to the left and right of the label (10–60px).
Font size	The size of the label (10–22px). It stays the same on every screen, so labels remain easy to read on a phone.
Corner radius	How round the corners are (0–50px). 0 gives a square button; 50 a full pill.
Border thickness	The outline's thickness (0–4px).
Uppercase text	Writes button labels in capital letters.
Font weight	Regular or Bold, from the body font.
Letter spacing	The space between letters (0–3px). A little spacing helps uppercase labels.

Note

Buttons get slightly smaller on smaller screens: the padding is 90% on tablets and 80% on phones, while the label keeps its size. The quantity selector and the express checkout buttons follow the same height, so they always line up with Add to cart.