# Skill: Style premium-looking buttons and apply the liquid glass effect correctly

> Master this to diagnose and fix flat, lifeless UI buttons using shadow, border, states, and smooth transitions, and to apply glassmorphism only where it works; apply whenever building or reviewing interactive components and floating panels.

Source: sodigi*learn -- inspiration/krasivye-knopki-i-steklo * https://sodigi.io/learn/inspiration/krasivye-knopki-i-steklo

## When to use

- A button looks flat, lifeless, or "filled with color and forgotten."
- Building hover and active states for interactive elements.
- Implementing a glass/frosted panel effect for navigation, modals, or floating cards.
- Briefing an AI assistant on specific UI polish techniques instead of "make it prettier."

## Core rules

- An expensive button is the sum of small things: shape, soft shadow, thin border, and living states. No single trick does it alone.
- Shadow signals height and pressability. It must be soft (heavily blurred), translucent, tinted toward the background color, offset downward -- never a sharp black blob.
- Side padding inside the button must be noticeably larger than top/bottom padding.
- Corner rounding must be intentional: clearly soft, or honestly pill-shaped. In-between "a little by eye" looks accidental.
- Every interactive button needs at least hover (floats up slightly, shadow grows) and active/pressed (sinks in, shadow shrinks) states.
- Transitions between states must be smooth (fractions of a second). Instant state changes look cheap and jerky.
- Liquid glass requires three things simultaneously: background blur (frosted effect), translucent fill layer, thin light border/highlight along the edge. Remove any one and glass fails.
- Glass only works over a lively background (photo, gradient, color splashes). On a flat fill there is nothing to blur.
- Primary action buttons must remain solid with high contrast text. Do not make the main CTA glassy -- transparency kills contrast and readability.
- Restraint reads as expensive. Oversized shadows, acid gradients, and everything glowing at once reads as cheap.

## Procedure

For a button:
1. Set corner rounding: small and consistent (e.g., 6-8px for a standard button, fully rounded for a pill).
2. Set padding: horizontal padding ~1.5-2x the vertical padding.
3. Add a soft shadow: blurred, translucent, tinted (not black), offset slightly downward.
4. Add a thin 1px light border along the top edge (or full perimeter at low opacity) for depth.
5. Implement hover state: translateY(-2px) or equivalent, shadow grows slightly, brightness increases.
6. Implement active/pressed state: translateY(1px), shadow shrinks.
7. Set transition on all state changes: ~100-150ms, ease-out. No instant jumps.

For a glass panel:
1. Ensure the background beneath the panel is a photo, gradient, or colorful surface -- not a flat fill.
2. Apply background blur to the area behind the panel (CSS backdrop-filter: blur(), or equivalent).
3. Add a translucent fill layer on top (semi-opaque, not fully transparent, not opaque).
4. Add a thin light border along the full perimeter (low opacity white or near-white).
5. Add a slightly brighter highlight specifically along the top edge to imitate glass thickness.
6. Add a soft drop shadow below so the panel reads as lifted.
7. Verify text inside the panel remains high-contrast and readable.

## Ready-to-use prompt

```
Style the button to look premium and modern:
- Shape: slight corner rounding (not sharp 90-degree corners). Side padding noticeably larger than vertical.
- Shadow: soft, heavily blurred, translucent (not black), tinted toward the background, offset downward.
- Top edge: thin 1px light border for depth.
- Hover state: button floats up slightly (~2px), brightens a touch, shadow grows softly.
- Pressed/active state: button sinks (~1-2px), shadow shrinks.
- All transitions: smooth, ~120ms, ease-out. No instant state jumps.

For the glass panel (use only if there is a lively background beneath it):
- Blur the background under the panel (frosted glass effect).
- Translucent fill layer on top: semi-opaque, not fully see-through.
- Thin light border on all edges plus a brighter highlight along the top edge only.
- Soft drop shadow below to read as lifted.
- Text inside must remain contrasting and fully readable.
- Do NOT apply glass to the primary CTA button -- keep that solid.
```

## Pitfalls

- Sharp black shadow pressed right against the button: looks like a sticker with an outline. Blur heavily and make it translucent.
- No hover or active states: a button that does not react to the cursor is just a picture. Minimum hover is half the "expensive" feeling.
- Instant state transitions: any state change without a smooth animation looks cheap and jerky.
- Glass on a flat single-color background: there is nothing to blur. The effect is simply invisible.
- Overdoing everything simultaneously: huge shadows, glowing borders, acid gradients, animations on everything. Restraint reads as quality; excess reads as cheap.
- Primary CTA button made glassy: transparency drops contrast and makes the main action harder to read and trust.
- Oversized shadows that spread in all directions: the button appears to float in space rather than sit above the surface.