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

  1. CSS Blob Effects

Creator

  • Mikael Ainalem

Programming language

  • HTML / CSS / JavaScript

Information the code

Logo with Ripple Effect

Using clip-path makes it possible to have the Material UI ripple effect on irregular shapes.

Browser Support: Chrome, Firefox, Opera, Safari

Responsive: yes

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

Responsive: yes

Dependencies:

Creator

  • Liam

Programming language

  • HTML / CSS (SCSS)

Information the code

Toggle Button with Ripple Effect

A CSS-only toggle button with dynamic ripple inverse text colour.

Browser Support: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Chris Underdown

Programming language

  • HTML / CSS (SCSS)

Information the code

Ripple Animation Button

HTML and CSS ripple animation button.

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

Responsive: yes

Dependencies:

Creator

  • ViktorKorolyuk

Programming language

  • HTML / CSS / JavaScript

Information the code

Circular Ripple Hover Effect on Button

Hover over each of the buttons to see the effect in action.

Browser Support: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Nitish Khagwal

Programming language

  • HTML / CSS (Less) / JavaScript

Information the code

Material Design Ripple Effect

Material Design inspired ripple ink effect using CSS and JavaScript.

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

Responsive: yes

Dependencies:

Creator

  • jakob-e

Programming language

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

Information the code

Ripple Effect

Ripple effect using CSS variables.

Browser Support: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Irem Lopsum

Programming language

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

Information the code

Toggle Button with Ripple

Toggle button with ripple effect in HTML, CSS and JS.

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

Responsive: yes

Dependencies:

Creator

  • Jack Thomson

Programming language

  • HTML (Haml) / CSS (SCSS)

Information the code

Ripples

This is a cool little mixin I made in SCSS for button animations. Hover over the buttons to see the magic!

Browser Support: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • magnificode

Programming language

  • HTML / CSS (SCSS)

Information the code

Hover Ripple

Little hover ripple effect.

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

Responsive: yes

Dependencies: