Actions

Switch Theme

Getting startedInstallation

SocialsYouTube

Getting started

InstallationBasics

Texts

Arc TitleBlade RevealBlended HoverBlur ReadingBlur RevealCountdownCounterCounter v2Decode HoverDecode RevealDynamic CopyrightExchange TitleExchange Title v2Fluid Gradient TitleHighlight HoverInline ImagesLetter LauncherMask HoverMousefill TitleProximity WeightRandom LettersScribble RevealScroll CascadingScroll GradientScroll ReadingShading Lines TitleSVG RevealSwap Hover3D Swap HoverSwap ReadingText ShimmerTwist RevealTypedUnderline HoverUnfold HoverUnfold RevealVariable Font Hover

Buttons

Anyside ButtonArrow ButtonArrow Button v2Arrow Button v3Arrow IconCrystal ButtonGlowing ButtonLayer ButtonMarquee ButtonMarquee Button v2Mask ButtonMicrobox ButtonNeumorphic ButtonPrism ButtonRainbow ButtonRipple ButtonRipple Button v2Ripple Button v3Shiny ButtonSplit Button

Menus

BurgerCircular MenuCTA NavDockDrawerDropdownDropdown megaMenuDynamic IslandExpanding MenuFocus NavGooey NavMorphing NavMulti OffCanvas MenuOffCanvas MenuOverlay MenuSticky HeaderStripe megaMenuWrap Menu

Sliders

Infinite SliderNext SliderParallax Slider

Backgrounds

Border BeamBubblesFluidsGeneratorismGradientlyGrainyInteractive LinesParticlesPhysicsSpotlightSpotlight v2TilesTiles v2

Cursors

Cursor SlideCursor TrailDesigner CursorMouse ParallaxNext Cursor

Medias

Before/After ImageImage AccordionImage HotspotsImage RevealMediaParallaxVideo SequenceZoom Lens

Cores

Back to TopClick & CopyCodepenCookiesDark ModeDecode CardDistorsion TabsExpandersFlipboxGlitchyGlowing CardHorizontal MarqueeHorizontal ScrollInteractive DividerInverted CornerLampLottieMotion DividerNext TabsObserverParallax HoverPixels Shimmer CardProgress BarProgress Bar v2ScrollbarSharerSmooth ScrollSpinnerStacking CardsTable of ContentsTimelineTippyToastToolteamVertical MarqueeQR Code

Features

Next UIAnimatorPage Transitions

Jose Tamu

June 3, 2025 /

Beginner /

CSS only

Dot Button

Dot Button

Animation controls

Dot origin: from where the dot swap will come from.
Dot Duration
Text Duration: text swap duration.

On this page