Subtle Click Feedback Effects

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>
</button>

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.cbutton--click,
.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 🙂