User Experience Design 5 min read

How to Build a 60‑Second Countdown Button in Axure

This step‑by‑step guide shows how to create a clickable button with a 60‑second countdown using Axure’s dynamic panels, global variables, and conditional logic, covering styling, state switching, variable updates, and edge‑case handling to ensure a smooth prototype experience.

AI Software Product Manager

Jun 12, 2025

Overview

This guide shows how to build a 60‑second countdown button in Axure RP. The button displays the remaining seconds, disables itself while counting down, and resets automatically so it can be reused.

Procedure

Drag a Button onto the canvas. Set its fill colour to #3366FF , remove the border, set the font colour to #FFFFFF , and give it a 4‑pixel corner radius.

Create a Dynamic Panel next to the button. Duplicate its default state so the panel has two empty states (State 1 and State 2). These states will be toggled to drive the countdown visual.

Define a global variable named second with an initial value of 60 (Menu → Project → Global Variables). This variable stores the remaining seconds.

Add an OnClick interaction to the button that starts the countdown:

Set the button text to [[second]] 秒 (e.g., "60 秒").

Start a Timer that fires every 1 second.

In the timer action, toggle the dynamic panel between State 1 and State 2 (this forces a state‑change event each second).

Attach an OnPanelStateChange event to the dynamic panel. Each time the panel switches state, update the global variable: [[second - 1]] Then set the button label to [[second]] 秒 so the displayed number decreases.

Prevent the variable from becoming negative by adding a condition to the state‑change action: only execute the decrement when second > 0 .

When second reaches 0 , change the button label back to the original text (e.g., "获取验证码"). This signals that the countdown has finished.

Immediately after resetting the label, re‑initialise second to 60 so the button can be pressed again.

Stop the timer (or stop the dynamic panel’s state toggling) when the countdown finishes. This prevents further state changes after the variable has been reset.

During testing the button sometimes displayed "0 秒". To avoid showing zero, change the condition from second > 0 to second > 1 before performing the decrement.

Finally, place the dynamic panel on top of the button, send it to the back, and group the two widgets. This keeps the panel’s state‑change logic attached to the button while preserving the visual appearance.