Button design
Style the call-to-action button's colors, size, and corners.
The Button card is on the Design tab for top/bottom bar and landing page timers. Product page and cart page timers don't have it.
The card is always shown for those two timer types, but it only affects your storefront when Call to action is set to Button on the Content tab. With any other CTA setting there's no button to style. See Call to action.
Style the button
Open the timer and go to the Design tab.
Find the Button card.
Set Button color — the background fill.
Set the button text size and color under Button text size and color.
Set Button text size (mobile) so it fits on a phone.
Set Button border radius to round the corners.
Click Save.
Recommended values
| Setting | Recommended |
|---|---|
| Text size (desktop) | 14–16px |
| Text size (mobile) | 12–14px |
| Border radius | 0 square, 4–8 subtle, 20+ pill |
Make it the loudest element
The button and the digits both want attention. The digits create the urgency; the button captures it. Give the button the highest-contrast color in the timer — not a slightly lighter shade of the background.
- On a dark timer, a white or bright button works well
- On a bright timer, a dark or black button works well
Check it on a phone in daylight
Phone screens get used in bright sunlight far more than desktops. A low-contrast button that looks refined on your monitor can be invisible outdoors.
Tip
On a narrow bar, consider Make entire bar clickable instead of a button. You get a much larger tap target and one less element competing with the digits.