Skip to content

Feature: Add ease-ripple click tap effect utility class #17392

Description

@Nareshkumawat-star

Feature Request

Material Design-style ripple effects on button click are extremely popular but completely absent from EaseMotion CSS.

Proposed Solution

  • Class: .ease-ripple
  • Pure CSS implementation using ::after pseudo-element with transform: scale() and opacity animation on :active state
  • CSS variables: --ease-ripple-color, --ease-ripple-duration (default: 0.5s), --ease-ripple-opacity
  • Works on buttons, links, list items, or any clickable element
  • No JavaScript required

Files to Create

submissions/examples/ease-ripple/style.css
submissions/examples/ease-ripple/demo.html
submissions/examples/ease-ripple/README.md

Metadata

Metadata

Labels

GSSoC-26Official GSSoC 2026 issueanimationAnimation effects, hover interactions, motion ideas, transitionsgood first issueGood for newcomersgssoc:approvedApproved for GSSoC contributionshelp wantedExtra attention neededlevel:intermediateRequires moderate project understanding

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions