Collection of hand-picked free HTML and CSS button click effect code examples from codepen and other resources. Update of February 2019 collection. 6 new items.

Related Articles

  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

Author

  • Leandro Gabriel Casas

Links

Made with

  • HTML / CSS (SCSS)

About a code

Subtle Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Ashley Saleem-West

Links

Made with

  • HTML / CSS

About a code

Button Click Pulsing Effect

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Arjun Ace

Links

Made with

  • HTML / CSS

About a code

Copy Button Click Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Mikael Ainalem

Links

Made with

  • HTML / CSS / JavaScript

About the code

Material UI Stretch Button

Delightful Material UI stretch button built by clipping paths.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Author

  • Brandon McConnell

Links

Made with

  • HTML / CSS (SCSS)

About the code

SCSS Beveled Buttons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

  • Takane Ichinose

Links

Made with

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

About the code

Ripple Button with Few JavaScript

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

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Author

  • Liam

Links

Made with

  • HTML / CSS (SCSS)

About 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.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Author

  • Christina Deemer

Links

Made with

  • HTML / CSS (SCSS)

About the code

Sweet Little Button Mixin

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Author

  • Mikael Ainalem

Links

Made with

  • HTML / CSS / JavaScript

About the code

Black Biometirics Login Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

  • Himalaya Singh

Links

Made with

  • HTML / CSS

About the code

Delete Button with Micro-Interactions

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

  • Aaron Iker

Links

Made with

  • HTML / CSS (SCSS)

About the code

Add To Collection Button

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Nour Saud

Links

Made with

  • HTML / CSS (SCSS) / JavaScript

About 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)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Custom Property Retro Buttons

Author

  • Dario Corsi

Links

Made with

  • HTML/Slim
  • CSS/SCSS

About the code

Custom Property Retro Buttons

Playing around with CSS custom properties.

Author

  • Juan Moises Torrijos

Links

Made with

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

About the code

Ripple Effect Animation

Ripple effect animation with CSS and ES6.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Author

  • evans

Links

Made with

  • HTML (Pug) / CSS (Stylus)

About the code

CSS Button Click

Simple click button in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Button Animation With CSS Offset Paths

Author

  • Nick Salloum

Links

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

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).

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • AaronMcGuire

Links

Made with

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

About the code

Button Click Page Animation

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

  • Dronca Raul

Links

Made with

  • HTML / CSS

About the code

Button Click Effect

Button in HTML and CSS with click effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

  • Binesh Babu Peringat

Links

Made with

  • HTML / CSS

About the code

Radial Gradient Animation CSS3

Simple CSS radial gradient animation using keyframes.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

  • hawcubite

Links

Made with

  • HTML / CSS (SCSS)

About 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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -