Webflow Button States: Hover, Focus, Active, and Animations

Add a Button element from the Add Elements panel (A) or use an existing button on your canvas. Select the button. In the Style Panel (S), check the Selector field at the top — it likely shows a generic class or the default button class. Click the Selector field and type a descriptive class name: 'btn-primary'. Press Enter to apply it. Having a dedicated class name ensures that when you style states (hover, focus, active), you're styling this specific button type rather than all buttons globally. Set the default state styles: Background Color (your primary brand color), Padding (12px top/bottom, 24px left/right), Border Radius (6px), Font Color (white), Font Weight (600).

With the button selected and 'btn-primary' in the Selector field, find the States dropdown directly below the Selector field. It currently shows 'None' (the default state). Click it and select 'Hover'. The canvas preview may shift to show a hover-state indicator. Now apply your hover styles: change the Background Color to a slightly darker or lighter version of your primary color (e.g., if primary is #2563EB, set hover to #1D4ED8). Alternatively, add a Box Shadow in Style Panel > Effects > Box Shadows for a lift effect: Y: 4, Blur: 12, Spread: 0, Color: rgba(37,99,235,0.4). You can also add a subtle Scale transform: Style Panel > Effects > 2D & 3D Transforms > '+' > Scale > X: 1.02, Y: 1.02.

The hover state change is currently instant. To make it smooth, you must add a Transition on the NONE (default) state — not the Hover state. Switch the States dropdown back to 'None'. Scroll to Style Panel > Effects > Transitions. Click '+' to add a transition. Set Property to 'All' (or specify individual properties like 'background-color' and 'box-shadow' for more controlled performance). Set Duration to '200ms'. Set Easing to 'Ease Out'. The transition applies in both directions — as you enter hover AND as you leave hover — because it's defined on the element's base state.

The focused state appears when a user tabs to the button using a keyboard — critical for accessibility. Switch the States dropdown to 'Focused'. In Webflow, 'Focused' corresponds to the CSS :focus selector. Style it differently from hover to indicate keyboard focus clearly: remove or replace the browser default blue outline (which looks inconsistent across browsers) with your own. Add a custom Box Shadow in Effects > Box Shadows: X: 0, Y: 0, Blur: 0, Spread: 3px, Color: your primary brand color at full opacity. This creates a consistent branded focus ring. Also consider adding Outline: 2px solid [brand color] via Custom Properties if box-shadow isn't visible enough.

The pressed/active state shows while the user is clicking — the moment between mouse-down and mouse-up. Switch the States dropdown to 'Pressed'. Apply a 'depressed' visual: slightly darker background (one shade darker than hover), reduced scale (Effects > Transforms > Scale X: 0.98, Y: 0.98), and reduced box shadow (or none). This creates the physical 'press' feedback users expect. The visual difference should be: Default → Hover (lighter/lifted) → Pressed (darker/compressed). The press state typically lasts only 100-200ms during a click.

Webflow doesn't have a native 'disabled' state for visual styling in the Style Panel (disabled is an HTML attribute, not a CSS selector in Webflow's UI). Create a combo class instead. Select the button. In the Selector field, after 'btn-primary', click '+' to add a combo class and name it 'is-disabled'. In the States: None, apply: Effects > Opacity 40%, Events > Pointer Events: None (prevents clicking). This visually communicates unavailability. Apply this combo class to buttons that should appear disabled. For buttons connected to form states, add a Custom Attribute in Element Settings (D): attribute 'disabled', value 'true' for the actual HTML disabled behavior.

A loading state shows users their click registered while an async action processes. Create a Div Block inside the button (nest it using the Navigator). Inside this div, place both a Text Block ('Submit') and an SVG spinner element. Give the Div Block display: Flex, Align: Center, Gap: 8px. Initially, hide the spinner: select the spinner element, click the eye icon in the Navigator to set it hidden by default. In the Interactions panel (H), create a Mouse Click trigger on the button. First Click: Show spinner (Display: Flex), change button text opacity to 0.6. Optionally, add a CSS rotation animation to the spinner via a Page Head Code embed: .spinner { animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }

1/* Inject in Page Settings > Head Code for spinner animation */
2.btn-spinner {
3  width: 16px;
4  height: 16px;
5  animation: btn-spin 0.8s linear infinite;
6}
7@keyframes btn-spin {
8  to { transform: rotate(360deg); }
9}