Navigation

Get Started

IntroductionInstallation

All Buttons

Double ShiftDelete Button3 D ConfettiAnimationMatrix ButtonNeon ButtonPlasma ButtonQuantum ButtonShadow ButtonShimmer ButtonTron ButtonPluse ButtonCosmic ButtonPluse Glow ButtonSurprising ButtonDonateNow ButtonShare Icon ButtonNoise Button3D ButtonGlass MorphismHexagoan ButtonMorph ButtonElectric ButtonPulse ButtonExpand ButtonSplit ButtonSquish ButtonScan ButtonCircuit BorderLaser BorderRadar ButtonDigital Frame Wave Button Liquid ButtonShockWaveRadial RippleFloating ButtonGradient Flow Solar GradientShift GradientPrism GradidentDancing TextReveal TextScramble TextText AnimationTypewritter EffectText GlitchIcon AnimationIcon MorphHover GlowingBackgroudFill Effect BackgroudSound Effect Pressable buttonMoving BorderHologram ButtonBounce ButtonTextAnimated ButtonCyber Button

Uplift UI Docs

Glassmorphism Button

A modern button with Apple-style glassmorphism: blurred background, soft transparency, and animated shadow on hover.

Demo

Interactive Demo

Hover to see the glassmorphism blur and shadow effect.

Installation

Install the required dependencies to get started:

bash
Loading...

Usage

Import and use the AppleGlassEffet component in your app:

tsx
Loading...

Props

PropTypeDefaultDescription
childrenReact.ReactNode-Button content (text or elements).
classNamestring""Additional CSS classes for the button.
type"button" | "submit" | "reset""submit"Button type attribute.
onClick(e: React.MouseEvent<HTMLButtonElement>) => voidundefinedClick handler for the button.

Features

  • Glassmorphism effect with blur and transparency
  • Animated hover state for background and shadow
  • Customizable via className
  • Accessible and keyboard-friendly
  • TypeScript support

Dependencies

Next.js 15+
Framer Motion
Tailwind CSS (recommended)
TypeScript (recommended)