FloatingButton — floating-button

PREVIEW

Preview

USAGE

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

import { FloatingButton } from '@oalacea/chaosui/buttons/floating-button';

<FloatingButton>Float Away</FloatingButton>
<FloatingButton floatSpeed={2} floatAmplitude={15}>Wild Float</FloatingButton>
<FloatingButton shadowSize={40} shadowOpacity={0.5}>Deep Shadow</FloatingButton>

PROPS

PropTypeDefault

childrenButton content

ReactNode-

floatSpeedAnimation duration in seconds

number3

floatAmplitudeFloat distance in pixels

number10

shadowSizeShadow blur size

number20

shadowOpacityShadow opacity 0-1

number0.3

CSS VARIABLES

--float-speed3sFloat animation duration

--float-amplitude10pxFloat movement distance

--shadow-size20pxShadow blur radius

--shadow-opacity0.3Shadow opacity