Hey there! Brian Dys here — I’m a visual and visceral person at heart. Ever since my mom lent me her old film camera, I fell in love with photography. All of my creative musings were exemplified by my second brain, the computer. This journey is a topsy-turvy ride of creative pursuits — from electronic music to UX design.
I enjoy every dull and wild moments of it — yes, this life of mine that I share with a woman named Jaycelle and a boy named Bryce. Take a peek into my kaleidoscope!
Two of the ways in which you can show an illusion of a button being pressed are: darkening the background-color and nudging its vertical position.
[codepen_embed height=”360″ theme_id=”1820″ slug_hash=”nmEcq” default_tab=”result”]See the Pen Press Time by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]
It is important to provide for a hint when a user activates an element in your user interface (in this example, a button). The feedback assures the user that the element “responds” to his action.
The advantage of using transform: translateY is that it does not affect the elements around it (unlike using margin or padding).
