Collection of hand-picked free HTML and CSS button click effect code examples

Subtle Button

Button Click Pulsing Effect

Pure CSS button style. Pulsing effect on click with no JavaScript.

Copy Button Click Effect

Material UI Stretch Button

Delightful Material UI stretch button built by clipping paths.

SCSS Beveled Buttons

Ripple Button with Few JavaScript

Just a simple retro'ish ripple button with few Javascript codes for smoother animation.

CSS-only Ripple Effect Button

A CSS-only toggle button with dynamic inverse text colour. The animated radial-gradient is achieved by scaling a pseudo element that sits in front of the text. The dynamic text colour uses mix-blend-mode: difference.

Sweet Little Button Mixin

Black Biometirics Login Button

Delete Button with Micro-Interactions

Playing with micro-interactions, adding some micro-interactions on a delete button/trash icon.

Add To Collection Button

Simple animation if you add smth to a collection for example.

Bubbly Button with Click Animation

Made the bubbles using radial-gradient for background-image. This property is so cool that you can draw many things without adding extra divs or pseudo elements (::before and ::after)

Custom Property Retro Buttons

Playing around with CSS custom properties.

Ripple Effect Animation

Ripple effect animation with CSS and ES6.

CSS Button Click

Simple click button in HTML and CSS.

Button Animation With CSS Offset Paths

A button with animating fly out dots that move along an offset path (formerly known as CSS motion paths).

Button Click Page Animation

Button transition that could be used with barba.js to animate a page transition.

Button Click Effect

Button in HTML and CSS with click effect.

Radial Gradient Animation CSS3

Simple CSS radial gradient animation using keyframes.

CSS Gradient Button

A simple CSS-only button with smoothly changing gradients when hovered: looks nice, ultra simple, works in all modern browsers.