You can set up a hover effect when the cursor is hovered over a box or a style change when the focus is on a form entry field.

Hover (:hover)

A hover is an effect that is applied to an element when the user moves the cursor over it.

It's often used to make buttons and links look clickable.

Setting the style when hovering

Setting the hover style for an element in STUDIO

  1. Select a box or element.
  2. On the "Box" tab of the top bar, check the "Hover" option on the far right.
  3. Set the style when hovering. When you're done, uncheck the "Hover" option or click anywhere on the page to return it to normal.
  4. Launch a live preview to see what the hover effect looks like in real life.

Click on the gray "Live Preview" button in the upper right corner of the screen.

Focus (:focus)

Focus is the effect that is applied to the input fields of the form when the user makes a selection.

It is used to reveal to the user that the input field is selected.

Setting the style when in focus

The focus can only be set in the input fields of the form.

Setting the focus style for an element in STUDIO

  1. Select the input fields of the form.
  2. On the "Box" tab of the top bar, click on the "Focus" option in the pull-down menu of the "Hover" button on the far right.
  3. Set the focus style. Once the settings are complete, uncheck the "Focus" option and return to the normal state.
  4. Launch a live preview to see what the focus effect actually looks like.

Click on the gray "Live Preview" button in the upper right corner of the screen.

Active(:active)

Active is the effect applied to the form button at the moment the user clicks on it.

Setting the active style

Only the form button can be set to be active.

Setting the active style for an element in STUDIO:

  1. Select the form button.
  2. On the "Box" tab of the top bar, click on the "Active" option in the pull-down menu of the "Hover" button on the far right.
  3. Set the style when active. Once the configuration is complete, uncheck the "Active" option and return to normal.
  4. Launch a live preview to see what the active effect actually looks like.

Click on the gray "Live Preview" button in the upper right corner of the screen.

Did this answer your question?