# iOS Glass Button

> iOS 26 liquid glass button with frosted blur, specular highlight and soft shadow for photo or gradient backdrops.

- Author: Atelier UI
- License: MIT
- Page: https://chromotion.dev/en/components/ios-glass-button
- Site: Atelier UI (https://chromotion.dev)

## Install

```bash
npx shadcn@latest add https://chromotion.dev/r/ios-glass-button.json
```

Stack: React + TypeScript + Tailwind CSS v4, shadcn/ui conventions. `cn` comes from `@/lib/utils`.

## Dependencies

No extra dependencies.

## Usage

```tsx title="components/ios-glass-button-demo.tsx"
import { Play, Plus } from "lucide-react"

import { IOSGlassButton } from "@/components/ios-glass-button"

export default function IOSGlassButtonDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-4 rounded-2xl bg-gradient-to-br from-sky-400 via-indigo-500 to-fuchsia-500 p-12">
      <IOSGlassButton>
        <Play className="size-4 fill-current" />
        Play
      </IOSGlassButton>
      <IOSGlassButton tint="#34c759">
        <Plus className="size-4" strokeWidth={3} />
        New
      </IOSGlassButton>
      <IOSGlassButton disabled>Disabled</IOSGlassButton>
    </div>
  )
}
```

## Source

```tsx title="components/ios-glass-button.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

export interface IOSGlassButtonProps extends React.ComponentProps<"button"> {
  /** Optional CSS color mixed into the glass */
  tint?: string
}

export function IOSGlassButton({ tint, className, style, children, ...props }: IOSGlassButtonProps) {
  return (
    <button
      type="button"
      style={tint ? { backgroundColor: `color-mix(in oklab, ${tint} 55%, transparent)`, ...style } : style}
      className={cn(
        "group relative inline-flex h-12 items-center justify-center gap-2 overflow-hidden rounded-full px-7 text-[17px] font-semibold text-white select-none",
        "bg-white/20 backdrop-blur-xl backdrop-saturate-150",
        "shadow-[inset_0_0_0_0.5px_rgba(255,255,255,0.45),inset_0_1.5px_1px_rgba(255,255,255,0.6),inset_0_-1px_1px_rgba(255,255,255,0.15),0_8px_24px_rgba(0,0,0,0.18)]",
        "transition-[transform,background-color] duration-300 ease-[cubic-bezier(0.32,0.72,0,1)] hover:bg-white/30 active:scale-[0.94]",
        "focus-visible:ring-2 focus-visible:ring-white/70 focus-visible:outline-none",
        "disabled:pointer-events-none disabled:opacity-50",
        className
      )}
      {...props}
    >
      <span
        aria-hidden
        className="pointer-events-none absolute inset-x-3 top-0.5 h-1/2 rounded-full bg-gradient-to-b from-white/50 to-transparent opacity-70 transition-opacity duration-300 group-active:opacity-30"
      />
      <span className="relative inline-flex items-center gap-2 drop-shadow-sm">{children}</span>
    </button>
  )
}
```