Docs / Editor Basics

Styling hover states

Normal/Hover tabs on Background, Text Color, Border, Box Shadow, and Transform — no CSS required.

The Background Color, Text Color, Border, Box Shadow, and Transform controls on every widget's Style tab each have a small Normal/Hover switch above them. Switch to Hover and set a different value — Craftor generates the :hover rule for you, scoped to that one element.

Transition duration

A Transition Duration field controls how smoothly the element animates between its Normal and Hover values — e.g. a button fading to a darker background over 200ms, or scaling up slightly on hover, instead of snapping instantly.

This covers the common case without writing any CSS. For pseudo-classes other than :hover (:focus, :active) or more elaborate transitions, use the Custom CSS field on the Advanced tab instead — see "Custom CSS on any element."