LiveMove the pointer around and watch the shine follow it
The prompt
Build a set of glossy buttons for a fictional fountain pen maker, Nibworth Pen Works, on a near black oxblood page (#140908) with a faint SVG noise grain. Above them, a lacquered pen drawn in inline SVG (red body #8d1512 to #d0342a, gold clip and bands), a gold uppercase label, a serif headline "Twelve coats of lacquer, one nib ground for your hand" and one line of copy. Three buttons, 56px tall and fully round. "Reserve your pen" in red lacquer, "Choose a nib" in black glass and a 56px brass heart button with aria-label "Save to wishlist" and aria-pressed. Each button has an inset rim light, a soft top gloss and a white radial highlight 70px wide whose position is set with CSS variables. Treat the pointer as a light source: every button, and a highlight on the pen, moves its hotspot toward the pointer even when not hovered, eased at 0.12 per frame. The hovered button tilts up to 14 degrees in 3D and presses to 0.965 scale. On touch the light follows your finger, and after 2.6 seconds of no input the light drifts in a slow loop on its own. Clicks change the label and a polite live note. On phones the red button goes full width. Reduced motion keeps the light still.
Written by Informeek Studio to recreate this design. Prompts are not deterministic: running it again gives a similar result, not an identical one.
Use it in three steps
Copy the prompt with the button above.
Paste it into your tool, such as v0, Lovable, Bolt or Claude.
Make it yours by swapping the lacquer red for your own brand colour and the pen for your product.
About this css button design
Most button styles are flat colour with a hover tint. This css button design treats the buttons as real objects with a polished surface. Each one has a rim light along its top edge, a soft gloss and a bright hotspot, and the pointer acts as the lamp. Move it across the page and every highlight slides toward it at once, so the three buttons and the pen above them all look lit by the same light.
The effect is plain CSS driven by two custom properties per button, set from a small script that eases the light each frame. The button under the pointer also tilts a little in 3D and presses in when clicked. Phones get the same shine from a finger, and when nobody is touching anything the light wanders on its own so the surface never looks dead.
Why the prompt works
It names three materials, lacquer, glass and brass, each with its own gradient.
It describes the light as one source, which keeps the reflections consistent.
It gives the numbers, a 70px hotspot, 0.12 easing and a 14 degree tilt.
It covers touch and idle, so phones never see a still button.
Where to use it
Luxury product pages, pre-order launches and any dark hero where one call to action should feel precious rather than loud.
The prompt is shared under CC BY 4.0. Reuse it freely, including commercially, with a credit linking back to this page.
We use cookies to measure how the site is used and, if you allow it, to show advertising. Prompts you copy and previews you try are never collected. See our privacy policy.
