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

  1. CSS Buttons
  2. CSS Button Hover Effects
  3. CSS 3D Buttons
  4. CSS Submit Buttons
  5. CSS Gradient Buttons
  6. CSS Flat Buttons
  7. CSS Close Buttons
  8. CSS Download Buttons
  9. CSS Play/Pause Buttons
  10. CSS Button Libraries

Creator

  • Mikael Ainalem

Programming language

  • HTML / CSS / JavaScript

Information the code

Material UI Stretch Button

Delightful Material UI stretch button built by clipping paths.

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

Creator

  • Brandon McConnell

Programming language

  • HTML / CSS (SCSS)

Information the code

SCSS Beveled Buttons

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Creator

  • Takane Ichinose

Programming language

  • HTML (Pug) / CSS (SCSS) / JavaScript (Babel)

Information the code

Ripple Button with Few JavaScript

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

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

Creator

  • Liam

Programming language

  • HTML / CSS (SCSS)

Information the code

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.

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

Creator

  • Christina Deemer

Programming language

  • HTML / CSS (SCSS)

Information the code

Sweet Little Button Mixin

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

Creator

  • Mikael Ainalem

Programming language

  • HTML / CSS / JavaScript

Information the code

Black Biometirics Login Button

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Creator

  • Himalaya Singh

Programming language

  • HTML / CSS

Information the code

Delete Button with Micro-Interactions

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Creator

  • Nour Saud

Programming language

  • HTML / CSS (SCSS) / JavaScript

Information the code

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)

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Creator

  • Juan Moises Torrijos

Programming language

  • HTML (Pug) / CSS (Sass) / JavaScript (Babel)

Information the code

Ripple Effect Animation

Ripple effect animation with CSS and ES6.

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

Creator

  • evans

Programming language

  • HTML (Pug) / CSS (Stylus)

Information the code

CSS Button Click

Simple click button in HTML and CSS.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Creator

  • AaronMcGuire

Programming language

  • HTML (Pug) / CSS (SCSS) / JavaScript

Information the code

Button Click Page Animation

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Creator

  • Dronca Raul

Programming language

  • HTML / CSS

Information the code

Button Click Effect

Button in HTML and CSS with click effect.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Creator

  • Binesh Babu Peringat

Programming language

  • HTML / CSS

Information the code

Radial Gradient Animation CSS3

Simple CSS radial gradient animation using keyframes.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Creator

  • hawcubite

Programming language

  • HTML / CSS (SCSS)

Information the code

CSS Gradient Button

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: