CSS-ONLY RIPPLE EFFECT BUTTON

Author:

  • Liam
  • January 3, 2019

Made with:

  • HTML / CSS (SCSS)

About the code:

This is a nice and simple 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:

Download Demo and Code

Add a Comment

Your email address will not be published. Required fields are marked *