Hover & Focus States

Apply classes conditionally on hover or focus using vel-hover: and vel-focus: prefixes.

Class	Properties
vel-hover:{class}	Applies {class} on :hover
vel-focus:{class}	Applies {class} on :focus and :focus-visible
vel-active:{class}	Applies {class} on :active

Examples

Hover background change

example.html

<button class="vel-transition-colors vel-duration-200 vel-bg-surface-2 vel-hover:bg-primary vel-text-white vel-py-3 vel-px-6 vel-rounded-lg vel-cursor-pointer" style="border:none">
  Hover to change background
</button>

Focus ring on input

example.html

<input class="vel-focus:ring vel-focus:ring-primary vel-bg-surface-1 vel-text-base vel-rounded-lg vel-py-3 vel-px-4 vel-w-full" type="text" placeholder="Focus me to see ring" style="border:1px solid #1e2d45;outline:none;max-width:20rem" />

Active scale press effect

example.html

<button class="vel-transition-transform vel-duration-100 vel-active:scale-95 vel-bg-primary vel-text-white vel-py-3 vel-px-6 vel-rounded-lg vel-cursor-pointer" style="border:none;transform-origin:center">
  Press me
</button>

Combining hover and focus states

Hover or focus this link

example.html

<a class="vel-transition-colors vel-duration-150 vel-text-muted vel-hover:text-primary vel-focus:text-primary vel-focus:outline-none vel-inline-block vel-py-1" href="#" style="text-decoration:none">
  Hover or focus this link
</a>