OK Hamburger Menu Button Hover Cross Hover Menu Three horizontal bars rotate into a cross on hover or focus, with the middle line fading while the top and bottom bars form the X.
OK Pure CSS Circle Menu Circle Menu Pure CSS circular social menu with a checkbox toggle, center close icon, and six radial action buttons arranged around the control.
OK Hamburger Menu Button Doner Stack Hover Menu Three stacked bars use different widths to create a tapered doner menu shape, with a compact hover motion that keeps the icon clean and minimal.
OK Hamburger Menu Button Bento Grid Hover Grid Nine small squares form a bento-style grid and animate on hover or focus, giving the menu icon a modular app-grid interaction.
OK Hamburger Menu Button Kebab Dots Hover Dots A vertical three-dot kebab icon rotates and expands with extra dot movement, creating a compact menu animation for minimal navigation controls.
OK Hamburger Menu Button Meatball Dots Hover Dots A horizontal three-dot meatball icon rotates smoothly on hover or focus, keeping the motion subtle while making the menu state feel interactive.
OK Hamburger Menu Button Collapse Cross AJS Cross Three hamburger lines collapse inward and rotate into a centered cross, using eased motion to make the X transformation feel smooth and deliberate.
OK Hamburger Menu Button Cross Slide AJS Slide The menu bars slide sideways before returning into a crossed X shape, creating a lateral transition between the closed and open menu states.
OK Hamburger Menu Button Cross Orbit AJS Orbit The bars rotate through an orbital movement before locking into an X, giving the hamburger-to-close animation a circular, dynamic path.
OK Hamburger Menu Button Arrow Bounce AJS Arrow The hamburger icon collapses into a back arrow with a bounce easing effect, adding a spring-like return at the end of the motion.
OK Hamburger Menu Button Arrow Slide AJS Arrow The bars slide laterally and reshape into a directional arrow, creating a clear transition from menu icon to back-navigation state.
OK Hamburger Menu Button Arrow Orbit AJS Orbit The hamburger lines rotate through an orbital path and settle into a back arrow, combining circular motion with directional navigation feedback.
OK Hamburger Menu Button Classic Cross Menu X A classic three-line hamburger icon transforms into an X, with the top and bottom bars rotating while the center bar disappears.
OK Hamburger Menu Button Split Cross Split Menu The hamburger icon splits into separated line segments that reorganize into a cross, creating a more detailed multi-part X transition.
OK Hamburger Menu Button Center Cross Center X The upper and lower bars pull toward the center before rotating into an X, creating a compact cross animation from the middle point.
OK Hamburger Menu Button Pivot Cross Pivot X The menu bars pivot from their edges to form a wider open X, making the transition feel hinged rather than simply rotated.
OK Hamburger Menu Button Circle Cross Menu Toggle A circular menu button toggles between three horizontal bars and a centered X, keeping the transformation contained inside the round button shape.
OK Hamburger Menu Button Slide Cross Menu Toggle The hamburger bars move sideways and rotate into a cross, combining horizontal slide movement with the classic open-menu X transition.
OK Hamburger Menu Button Back Arrow Back Menu The three-line menu icon morphs into a left-pointing back arrow, turning the hamburger control into a clear return-navigation symbol.
OK Hamburger Menu Button Back Slide Arrow Back Menu The menu bars slide horizontally while reshaping into a back arrow, creating a directional transition with visible lateral displacement.
OK Button Radio Basic Dot Radio Básico Compact radio button with a small circular indicator that fills when selected, using a thin outline and simple centered label.
OK Button Radio Rounded Pill Pill Radio Pill-shaped radio button with a rounded capsule body, circular selection dot, and smooth filled active state.
OK Button Radio Soft Card Soft Card Soft card-style radio button with rounded corners, warm filled background, and a bold circular selection marker beside the label.
OK Button Radio Neon Pulse Neon Dark radio button with purple neon border, glowing outer pulse, and a bright circular indicator that emphasizes the active state.
OK Button Radio Liquid Blob Liquid UI Organic liquid-style radio button with a soft blob shape, translucent depth, and a rounded indicator blended into the surface.
OK Button Checklist Basic Clean Checklist Básico Clean checklist button with a small square check icon, thin green border, and compact label aligned in a simple rectangular shape.
OK Button Checklist Rounded Pill Pill Button Rounded pill checklist button with a circular check marker, blue filled background, and smooth capsule-style selected state.
OK Button Checklist Soft Card Soft UI Soft card checklist button with large rounded corners, purple filled surface, and a white circular check marker centered beside the text.
OK Button Checklist Neon Glow Neon Glow Dark checklist button with cyan neon border, glowing halo, and a bright check icon that creates a luminous active-state effect.
OK Button Checklist Brutalist Stamp Neo-Brutalist Brutalist checklist button with a sharp rectangular stamp shape, thick dark border, hard offset shadow, and high-contrast check box.
OK Button Checklist Liquid Orb Liquid UI Liquid checklist button with a rounded gradient body, glowing orb-style check marker, and blended purple-blue depth.
OK Button Toggle Gooey Morph SVG Goo SVG toggle with a gooey filter where the circular knob stretches elastically and melts into the track while switching states.
OK Button Toggle Light Minimal Pure CSS Minimal light toggle with a soft white track and a small circular knob that slides horizontally between inactive and active states.
OK Button Toggle iOS Slider Pure CSS Minimal light toggle with a soft white track and a small circular knob that slides horizontally between inactive and active states.
OK Button Toggle Skewed Labels Pure CSS Minimal light toggle with a soft white track and a small circular knob that slides horizontally between inactive and active states.
OK Button Toggle Flat Switch Pure CSS Minimal light toggle with a soft white track and a small circular knob that slides horizontally between inactive and active states.
OK Button Toggle Flip Panel Pure CSS Minimal light toggle with a soft white track and a small circular knob that slides horizontally between inactive and active states.
OK Button Toggle Bootstrap Large Bootstrap Large Bootstrap-style toggle with a wide pill track, visible ON/OFF labels, and a sliding handle that fills the switch area.
OK Button Toggle Bootstrap Default Bootstrap Default Bootstrap-style toggle with a balanced pill track, internal state text, and a clear horizontal sliding transition.
OK Button Toggle Bootstrap Small Bootstrap Small Bootstrap-style toggle with compact internal labels and a short sliding handle for dense interface layouts.
OK Button Toggle Bootstrap Mini Bootstrap Mini Bootstrap-style toggle with a very compact pill track and simplified sliding motion for small UI controls.
OK Button Toggle Day Night Funky CSS3 Day and night toggle where the control shifts between moon, stars, and sun visuals through a themed animated state transition.
OK Button Toggle Like Face Funky CSS3 Like toggle with an animated facial expression and color change, turning the switch into a playful emotional feedback control.
OK Button Toggle Text Shadow Funky CSS3 Text-based toggle with ON/OFF states, physical shadow depth, and a pressed block effect that makes the switch feel dimensional.
OK Button Power 3D Press Funky CSS3 Circular power button with 3D depth, beveled surface, and a pressed-down motion that simulates a physical power switch.
OK Button Power 3D Glow Funky CSS3 Circular power button with 3D depth and a strong active glow, using a dark background to emphasize the illuminated power state.
OK Button Toggle Physical Knob Funky CSS3 Physical switch-style toggle with an elevated knob, integrated labels, and a mechanical slide that feels like a real hardware control.
OK Button Toggle Sliding Switch Funky CSS3 Sliding switch with a two-color track and a mechanical selector that moves across the rail to reveal the active state.
OK Button Toggle Neon Text Funky CSS3 Typographic neon toggle with glowing text, bright edge lighting, and an animated state change that emphasizes the selected label.
OK Button Toggle Minimal Dark Mode CodePen Minimal dark mode toggle with sun and moon symbols, a reactive background, and a smooth visual shift between light and dark states.