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.

ClickEffect

View demo Download source

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:

ClickEffect

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.

ClickEffect2

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.

ClickEffect3

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 :)

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) 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.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 46

  1. 1

    Hi’ May Lou, thanks for you ideas, amazing.!!

    but, could you help me, how to change ‘click’ to ‘hover’ , so the effect will be running when we ‘hover’ not ‘clicked’

    Best Regards

    Made

  2. 3

    I really like them! Any idea how I can make the animation/effect repeat itself for a longer time duration?

  3. 6

    Nice work Mary Lou. This little jQuery snippet may also be helpful for those that don’t want the JS/classie stuff..


    $('.cbutton').click(function(){
    var $ele = $(this);
    $ele.addClass("cbutton--click");
    setTimeout(function(){
    $ele.removeClass("cbutton--click");
    }, 400);
    });

    Demo: http://www.codeply.com/go/poKWUEc3h9

Follow this discussion

Leave a Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>