UI Buddy

Responsive States

You can also add responsive state-based styles to an element. This means you can do things like changing an element's hover style at different breakpoints for example.

state:media:property:value

To apply a responsive state-based style, first add the state prefix, then the responsive media prefix, followed by the property:value convention. Example:

<h1 class="color:black hover:md:color:red"></h1>

In this example, the heading element has a base color of black, and will change its color to red on hover for medium-sized screens and above only.

The following table lists all supported element states:

StateDescription
HoverMouse over
ActiveActive link
VisitedVisited link
FocusFocused input element
DisabledDisabled input element
CheckedChecked input element