How to Style Hover, Focus and Active States with Elementor Classes

A button that does not react when you hover over it feels broken. A form field that gives no visual hint when you click into it feels confusing. And a link that looks identical when focused with the keyboard is a real problem for accessibility. These small interaction details, called states, are what make an interface feel responsive and trustworthy.

In the Atomic Editor, Elementor lets you style states directly inside Classes, without writing a single line of CSS. In this tutorial you will learn what hover, focus, and active states are, how to style them in a class, and how to build a complete, reusable button system.

The Three States You Need to Know

• Hover: the pointer is over the element. Only applies to devices with a mouse or trackpad.
• Focus: the element is selected, typically by clicking into a field or tabbing to it with the keyboard.
• Active: the element is being pressed at this moment, between mouse down and mouse up, or during a tap.

Each state gives visitors feedback: "this is clickable", "you are here", "your click registered".

Why Classes Are the Right Place for States

You could style hover effects element by element, but that means repeating the same settings on every button. Put the states in a class instead, and every element with that class behaves the same way. Change the hover color once, and the whole site updates.

Step 1: Create the Base Class

1. Add an atomic Button element.
2. In the Style tab, create a new class named btn-primary.
3. With the class selected and the Normal state active, style the default look:
   • Background: your color-primary variable.
   • Text color: white.
   • Padding: 14px top and bottom, 28px left and right.
   • Border radius: 8px.
   • Font weight: 600.

Step 2: Style the Hover State

Switch the class to the Hover state using the state selector in the Style tab. Only change what should be different:

• Background: a slightly darker shade, such as a color-primary-dark variable.
• Optionally, a soft box shadow to suggest lift.

Keep hover changes subtle. A small shift in color or shadow is enough; dramatic transformations can feel jumpy.

Step 3: Style the Focus State

Focus styles are essential for keyboard users, who navigate with the Tab key. Switch to Focus and add a clearly visible outline or ring:

• Outline or border of 2 to 3 pixels in a contrasting color.
• A small offset so the ring sits slightly outside the button.

Never remove focus indicators entirely. Without them, keyboard users cannot tell where they are on the page.

Step 4: Style the Active State

Switch to Active and add a tiny "pressed" effect:

• A slightly darker background than hover.
• Remove the hover shadow, or reduce it, so the button looks pushed down.

Step 5: Add a Smooth Transition

Without a transition, state changes snap instantly. A short transition of around 0.15 to 0.25 seconds on background color and shadow makes the change feel polished. Set it in the class so every button gets the same timing.

Building a Button System

Once btn-primary works, create variations by duplicating the class and changing only what differs:

Class	Normal	Hover
btn-primary	Filled with brand color	Darker fill
btn-secondary	Light fill, dark text	Slightly darker fill
btn-outline	Transparent with border	Filled background
btn-ghost	Text only	Subtle background tint

Combine classes where helpful. For example, a btn-lg class can handle larger padding and font size while btn-primary handles colors.

Beyond Buttons

States work on any atomic element. Some ideas:

• Cards: on hover, lift slightly with a shadow and change the border color.
• Links: on hover, change color and add an underline.
• Form inputs: on focus, highlight the border with the brand color.
• Icons: on hover, change color to signal interactivity.

Accessibility Checklist

• Every interactive element has a visible focus style.
• Hover is never the only way to reveal important information, because touch devices do not hover.
• Text in every state has sufficient contrast with its background.
• State changes do not rely on color alone; a shadow, underline, or outline helps colorblind users.

Troubleshooting

• Hover style does not apply. Check that you edited the class and not the element's local style, and that the correct state was selected.
• Local styles override the class. Element-level settings can take priority. Remove local overrides so the class controls the design.
• Focus ring appears on mouse click. Browsers often show focus on click for some elements. Keep the ring subtle but visible; it is better to show it than hide it.

Wrapping Up

States turn static designs into responsive interfaces. By styling hover, focus, and active inside Classes, you get consistent, accessible interactions across your whole site, and you only have to define them once. Start with a solid primary button class, add variations, and extend the same approach to cards, links, and forms.