The short verdict
- A button has at least five states. Generated sites usually design one.
- Without feedback, people click twice, submit twice or assume it failed.
- Each state needs a visual change and, for forms, words that say what happened.
01The states
A button or form is not one design. It is a small sequence, and each step should look different.
| State | What the visitor needs to know | Typical treatment |
|---|---|---|
| Default | This is clickable | Clear button styling |
| Hover and focus | This is the one I am on | Colour change, focus ring |
| Pressed | My click registered | Slight darken or press-in |
| Loading | Something is happening | Spinner or label change, button disabled |
| Success | It worked, and what next | Message that replaces or follows the form |
| Error | What went wrong, how to fix it | Message next to the problem |
02Where generated sites fall short
No loading state
The visitor clicks send and nothing changes for two seconds while the request travels. They click again. Now you have two enquiries, or the second click errors. Disable the button and change its label to “Sending...” the moment it is pressed.
A success message that says nothing
“Success!” in a green box. Success at what? Say what happened and what comes next: “Thanks, we’ve got your site. We’ll get back to you within two working days.”
Errors at the top of the page
A red banner saying “Please fix the errors below”, with nothing marked below. Errors belong next to the field, in words: “Enter an email address like [email protected]”, not “Invalid input”.
Errors too early
The field goes red as soon as someone starts typing their email, before they have finished. Check when they leave the field or submit, not on every keystroke.
The silent failure
The network drops or the server errors, and the form just stays as it was. Always have an error state for the submission itself, with a fallback: “That didn’t go through. Try again, or email us at...”
03Motion for feedback
- Pressed: immediate, under 100 milliseconds. Any delay feels like lag.
- Loading: a small spinner or a progress dot pattern, not a full-page overlay.
- Success: a short transition from form to message, around 300 milliseconds, so the change is noticed.
- Error: a gentle shake is common, but colour and text matter more. Keep it subtle.
“Every click is a question. The site should always answer it.”
04Accessibility
Screen reader users need to hear these states too. Announce loading, success and errors with a live region, link each error to its field so it is read out, and move focus to the success message when the form is replaced. Do not rely on colour alone: red text should also say what is wrong.
05Questions people ask
Should the success message replace the form?
For contact forms, usually yes, so people cannot resubmit by accident. For newsletter signups in a footer, an inline message works well.
Do I need a pressed state on desktop?
Yes. It is the fastest confirmation a click happened, and it matters most on slower connections.
Should I redirect to a thank-you page?
It can help with tracking conversions. Make sure the page says what happens next and does not feel like a dead end.
Can you review my form states?
Yes. Send us the link and we will try every state and tell you what is missing.
