206 CSS Buttons
Master the art of creating interactive CSS Buttons that provide clear user feedback. The core of these examples lies in leveraging pseudo-classes like :hover, :focus, and :active to define distinct visual states for user interaction. To create a satisfying tactile response, the transition property is used to smoothly animate changes to performant properties like transform and opacity. You’ll also find advanced techniques using pseudo-elements to create dynamic fill, shine, and border effects without any extra HTML markup, resulting in clean, self-contained, and highly reusable components.
Last updated:
Container Query Button Animation
A sleek interaction button where the code icon decomposes on hover: brackets slide apart and the slash rotates away, revealing the “Get Code” text. The animation is purely CSS-driven, utilizing calc() with a custom property --intent to interpolate transform values for a fluid, high-performance effect.
Metal/Glass Button
A high-quality simulation of a metallic surface that “plays” with light following the mouse cursor, creating a tactile sensation of premium material.
CSS Rage Button
A playful button that shakes, reddens, and “curses” with increasing intensity upon each click (or hover for the secondary button), visualizing a gradual loss of composure.
Glowing On/Off Buttons
A skeuomorphic toggle button where the entire press effect is implemented in pure CSS using box-shadow and transform: scale(). JavaScript is only used to toggle the WAI-ARIA attribute aria-pressed on click.
Skeuomorphic Like Button
An advanced “Like” button micro-animation based on CSS @property, where custom variables are used to animate the numbers and the icon.
Neumorphic Multi-Buttons with CSS Feedback
An effective button group where the hover effect is created via inset box-shadow - and the click confirmation animation is implemented using transform and opacity on the ::after pseudo-element.
Expanding Social Share Button
A smooth, morphing circular button that expands on click to reveal three link items, utilizing complex CSS transitions, transition-delay, and a Pug template structure for dynamic content generation.
Undo/Redo With Active Clock Animation
A clean frontend implementation of an interactive button pair, where the history logic (Undo/Redo state) is managed by minimal Vanilla JS, and the rich clock rotation and dial animation is fully delegated to CSS transforms.
Shine Gradient Buttons
An example of modern UI/UX design implemented with pure CSS. The demo shows how to use linear-gradient, box-shadow, and transform to create buttons with gradient fills and a 3D-like effect, while the @keyframes animation adds a dynamic shine, making the interactive element more engaging.
Gooey SVG Filter Button
An interactive “liquid” effect button crafted using SVG feGaussianBlur and feComponentTransfer filters. Cursor movement is tracked with JavaScript and passed to CSS to control a radial gradient.
Neomorphic Button
A striking button with a neomorphic design and a pulsating element, built using pure CSS variables and pseudo-elements. The hover and active state animations provide a smooth UX, making it perfect for drawing attention to key CTAs.
Button Fill Animation
Using pure CSS and a small JS script for class toggling, this demo shows how to create a button with a unique animation. The main feature is a div with border-radius: 50% and a transform that animates, creating a “filling” effect from within the button.
Smooth Corners with CSS
A progressive technique for creating complex UI shapes using the CSS Houdini Paint API - a squircle is generated by the smooth-corners worklet, surpassing the capabilities of border-radius. The shape’s curvature is dynamically controlled via the --smooth-corners CSS Custom Property, while the effect itself is built with a combination of pseudo-elements, mask, and clip-path.
Hover Effects
A dynamic hover effect in pure CSS, where the :has() pseudo-class triggers simultaneous animations: a slide-out tooltip and a smooth icon fill. The tooltip’s content is sourced from a data-tooltip attribute via attr(), and the fill color is flexibly configured with a --bg CSS Custom Property.
Gummy Buttons
A “gummy” button animation in pure CSS, where the effect is achieved by simultaneously animating transform: scale() and border-radius. Separate @keyframes are used for the :hover and :active states, creating a unique tactile response.
Button
The main button has a semi-transparent background, the ::before pseudo-element contains the animated gradient, and ::after has a solid dark background that “cuts out” the inner part, leaving only the border visible.
Push Button (CSS 3D Button)
A skeuomorphic 3D button created with multi-layered box-shadow and linear-gradient to simulate volume, highlights, and shadows. On :hover, the box-shadow styles are animated, creating a “pressed” effect.
Rainbow Shadow Button
Featuring a modern aesthetic, this button generates a soft aura using a blurred and offset pseudo-element whose color dynamics are precisely controlled by the oklch function and longer hue interpolation within the linear-gradient.
