INTERACTION_001CSS
Premium Button Lift
Weightless 2px rise with an edge highlight on hover.
Buttons / LightView
Back to promptsPROMPT_001 / LANDING PAGES PROMPT_002 / LANDING PAGES PROMPT_003 / BUTTONS
PROMPT_006 / BUTTONS
THREE BUTTONS. ONE LANGUAGE.
Primary, secondary and tertiary button variants with consistent hover, press and focus behaviour.
- BEST FOR
- Apps where every button was styled ad hoc.
- DIFFICULTY
- Easy
- TOOLS
- Lovable · v0 · Bolt · Cursor
USE THIS IN LOVABLE
Define a three-tier button system in the design system, not inline. Primary: white pill surface, black label, uppercase, hover translateY(-3px) with a soft shadow, active -1px, optional one-pass shine sweep reserved for the hero CTA. Secondary: dark glass surface, white label, 1px rgba(255,255,255,0.16) border that brightens to 0.28 on hover with a slightly lighter surface. Tertiary: text only with an arrow that translates 3px up-right on hover and an underline that wipes in from the left. All variants: 350ms cubic-bezier(0.22, 1, 0.36, 1), visible focus-visible ring, disabled state at 40% opacity with no motion. Replace every ad hoc button in the codebase with these variants. --- Tool: Lovable. Apply the changes directly to the existing codebase, reuse the current design tokens and component structure, and do not introduce new dependencies.
RECOMMENDED INTERACTIONS.
RELATED PROMPTS.
MAKE MY WEBSITE FEEL EXPENSIVE.
Adds restrained motion, glass surfaces, premium hover behavior, better typographic transitions and professional microinteractions.
premiumlanding-pagemicrointeraction
BUILD A LANDING PAGE THAT LOOKS HIRED.
A complete dark, monochrome, editorial landing page structure with asymmetric bento sections and restrained motion.
premiumlanding-pagedark-ui
GIVE MY CTA GRAVITY.
A reusable cursor-following button component with proper touch and reduced-motion fallbacks.
buttonmousepremium