Subtle Click Feedback Effects

A set of subtle effects for click or touch interactions inspired by the visualization of screen taps in mobile app showcases. The effects are done with CSS animations mostly on pseudo-elements.

From our monthly sponsor: Automate manual QA and catch visual bugs with Percyโ€™s all-in-one visual testing and review platform.

Recently, many cool interaction effects have been created that follow Google Material Design principles somehow. One of the great little effects seen around is the ripple click effect, also called click waves. While these effects are based on the place you click or touch, the whole idea of providing a subtle feedback effect is really interesting. Usually, subtle indicators are used in app showcases to visualize a tap on the mobile screen. But these kind of effects can actually be quite useful when applied to any click or touch interaction. The subtle feedback would indicate that the action element was actually hit, making the felt response time seem less if done appropriately.

Today we’d like to explore some of these click/touch effects, using different animations. While there are many kinds of animations that can be done to provide feedback, we’re particularly interested in the subtle “tap-like” effects.

Please note that some of the effects are highly experimental and therefore only work in modern browsers.

IE10 does not seem to support animationend on pseudo-elements, so you won’t see the effects working correctly there.

For the demo we are using icons by Font Awesome and we trigger the effect on a button:

<button class="cbutton cbutton--effect-boris">
	<i class="cbutton__icon fa fa-fw fa-play"></i>
	<span class="cbutton__text">Play</span>

The buttons have the following common style:

.cbutton {
	position: relative;
	display: inline-block;
	margin: 1em;
	padding: 0;
	border: none;
	background: none;
	color: #286aab;
	font-size: 1.4em;
	transition: color 0.7s;

.cbutton:focus {
	outline: none;
	color: #3c8ddc;

.cbutton__icon {
	display: block;

.cbutton__text {
	position: absolute;
	opacity: 0;
	pointer-events: none;

.cbutton::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -35px 0 0 -35px;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;

By adding a class with JavaScript we trigger the animation(s):

/* Effect Boris */

.cbutton--effect-boris::after {
	background: rgba(111,148,182,0.1);

.cbutton--effect-boris.cbutton--click::after {
	animation: anim-effect-boris 0.3s forwards;

@keyframes anim-effect-boris {
	0% {
		transform: scale3d(0.3, 0.3, 1);
	25%, 50% {
		opacity: 1;
	100% {
		opacity: 0;
		transform: scale3d(1.2, 1.2, 1);

Here is a GIF of one of the effects:


For the effect “Stana”, we use a transition on the SVG clipPath, something that only works in Chrome at this point. We basically scale a clipPath in the shape of a ring in order to reveal and hide the lines.


The CSS clip-path property that we use in the effect “Stoja” does not work in every browser. See the CanIUse support table for the CSS clip-path property for more details.


The technique for changing the color of the SVGs by using an identifier in the image source is based on the following gist by Lea Verou: Change an SVG file through the URL hash

This does not seem to work in mobile Safari, so you might not see the correct colors in effects “Azra” and “Dejan”.

We hope you enjoy these subtle effects and get inspired ๐Ÿ™‚

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 48

Comments are closed.
  1. This is as awesome as it gets! This article somehow doesn’t seem to appear on the <a href=”” title=”Playground Archives” rel=”nofollow”> hence discovered it a couple of hours late.

  2. Hey! Thnak you for this ! I plan to use it in a personal project.
    I have trouble with the “By adding a class with JavaScript we trigger the animation(s)”.
    Can you explain this please ?
    Because the only solution I found is not perfect at all. (add class on click, remove class after animation duration with timeout in js).

    Thank you very much.

  3. Hi, could somebody tell me how to make those smooth animated gifs? Any particular workflow?

  4. Love the effects, but I’m u sure on where I can fit this on my NY Giants Blog. Looks like I’ll have to figure this one out.

  5. Hey,

    Thanks for tutorial, i really appreciation with this article, cool effect and master of css

  6. I was amazed when you used Serbian names for classes really cool. I love to read your post.

    Samo nastavi!

  7. Hi I love this effect. Can this be applied to a button, which is rectangular in shape… and what will be the shape of the effect, circular or rectangular. Can you kindly show us example of that.