Hollow
Also called Ghost fill
The filled background empties, leaving only an outlined button on hover.
Use for
Buttons
Variants
- Hollow
Prompt
Replace [where] with the part of your page and paste the prompt into your AI agent. Each prompt includes the name of the motion, so next time you can simply ask for it by name.
Add a "Hollow" hover effect (also called ghost fill) to [where].
The filled background should fade away, leaving only the outline, and the label should change color to stay readable on the empty background: smooth and quick.
Keep the border the same thickness in both states so the element doesn't change size, and show the same effect on keyboard focus.