GlassButton — glass-button

PREVIEW

Preview

USAGE

case 'glass-button': return ; case 'neon-glow': return ; case 'floating-button': return ;

import { GlassButton } from '@oalacea/chaosui/buttons/glass-button';

<GlassButton>Default Glass</GlassButton>
<GlassButton blur="20px" bgOpacity={0.2}>Heavy Blur</GlassButton>
<GlassButton glowAmount={0.5}>Glowing</GlassButton>
<GlassButton glassColor="rgba(124, 58, 237, 0.2)">Purple Tint</GlassButton>

PROPS

PropTypeDefault

childrenButton content

ReactNode-

blurBackdrop blur amount

string"10px"

bgOpacityBackground opacity 0-1

number0.1

borderOpacityBorder opacity 0-1

number0.2

hoverOpacityHover background opacity

number0.2

glowAmountGlow intensity 0-1

number0

glassColorCustom glass color (rgba or hex with alpha)

string-

borderColorCustom border color

string-

CSS VARIABLES

--glass-blur10pxBackdrop filter blur amount

--glass-bg-opacity0.1Background opacity

--glass-border-opacity0.2Border opacity

--glass-hover-opacity0.2Hover state opacity

--glass-glow0Glow intensity

--glass-colorrgba(255,255,255,0.1)Glass tint color

--glass-borderrgba(255,255,255,0.2)Border color