Today I am going to share with you a set of subtle effects for click and touch both which is specially inspired by the visualization of screen tap in mobile app showcases or click on desktop interfaces to feel it. These effects are produced with CSS animations mostly on pseudo-elements.
If want to see input and hover effects please follow my previous post which is Awesome input focus effects and Beautiful Hover Effect Using Css3.
Recently, many cool associations effects have been created that follow Google Material Design principles anyhow. One of the pleasurable tiny effects seen regarding is the ripple click effect, a.k.a. click waves. While these effects are based regarding the place you click or amassed, the collective idea of providing a subtle feedback effect is in fact tempting. Usually, subtle indicators are used in app showcases to visualize a tap upon the mobile screen. But these easy to do to of effects can actually be quite useful taking into consideration applied to any click or tallying together together happening relationships. The subtle feedback would indicate that the function element was actually hit, making the felt admission time seem less if finished as a upshot.
In this article I am going to explore some of these click/touch effects, using different kind of animations. There are too many animations are available to generate these feedback animation on click, we are particularly showing interest in the subtle “tab-like” effects.
Please Note: Few of effects are Hight experimental that will work only in modern borwsers so please accordingly.
IE10 does not seem to support animationend on pseudo-elements, so you won’t see the effects working correctly there.
For example IE10 does not seems to fit for these animations on pseudo-elements, therefore you will not see any animation there.
For the demo we are using icons by Font Awesome and we trigger the effect on a button:
Lets know how to create Subtle Click Feedback Effects :
Here i am going to take one of effect to describe their common styles and with its effect style
1 2 3 4 | <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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | .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):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="hljs-comment">/* Effect Boris */</span> <span class="hljs-class">.cbutton--effect-boris</span><span class="hljs-pseudo">::after</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"> <span class="hljs-function">rgba</span>(<span class="hljs-number">111</span>,<span class="hljs-number">148</span>,<span class="hljs-number">182</span>,<span class="hljs-number">0.1</span>)</span></span>; <span class="hljs-rule">}</span></span> <span class="hljs-class">.cbutton--effect-boris</span><span class="hljs-class">.cbutton--click</span><span class="hljs-pseudo">::after</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">animation</span>:<span class="hljs-value"> anim-effect-boris <span class="hljs-number">0.3s</span> forwards</span></span>; <span class="hljs-rule">}</span></span> <span class="hljs-at_rule">@<span class="hljs-keyword">keyframes</span> anim-effect-boris </span>{ 0% <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">transform</span>:<span class="hljs-value"> <span class="hljs-function">scale3d</span>(<span class="hljs-number">0.3</span>, <span class="hljs-number">0.3</span>, <span class="hljs-number">1</span>)</span></span>; <span class="hljs-rule">}</span></span> 25%, 50% <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">opacity</span>:<span class="hljs-value"> <span class="hljs-number">1</span></span></span>; <span class="hljs-rule">}</span></span> 100% <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">opacity</span>:<span class="hljs-value"> <span class="hljs-number">0</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">transform</span>:<span class="hljs-value"> <span class="hljs-function">scale3d</span>(<span class="hljs-number">1.2</span>, <span class="hljs-number">1.2</span>, <span class="hljs-number">1</span>)</span></span>; <span class="hljs-rule">}</span></span> } |
By adding a class with JavaScript we trigger the animation(s):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | /* 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:
You actually make it seem so easy with your presentation but I find this topic to be really something that I think I would never understand. It seems too complex and very broad for me. I’m looking forward for your next post, I will try to get the hang of it!