Skip to content

Instantly share code, notes, and snippets.

@runspired
Last active March 7, 2018 07:19
Show Gist options
  • Save runspired/506f39a4abb2be48d63f to your computer and use it in GitHub Desktop.
Save runspired/506f39a4abb2be48d63f to your computer and use it in GitHub Desktop.
On mobile, sometimes it's necessary to provide an invisible larger area to recognize touch inputs on a crucial or otherwise difficult to activate button. This is an example of one way of doing so using pseudo elements. In this particular implementation, the buttons this was being added to would shrink while active, so a countering scaling effect…
.touchZone::after
content ' '
display block
width 100%
height 100%
z-index 100
top 0
position absolute
.touchZone.active::after
.touchZone:active::after
transform scale(1.25, 1.25)
/*
:active::after often not always work
*/
.touchZone:focus::after
transform scale(1.25, 1.25)
.touchZone-left::after
left -10%
width 110%
.touchZone-right::after
width 110%
.touchZone-left.touchZone-right::after
width 120%
.touchZone-top::after
top -10%
height 110%
.touchZone-bottom::after
height 110%
.touchZone-top.touchZone-bottom::after
height 120%
.touchZone-all::after
top -10%
left -10%
width 120%
height 120%
.touchZone-2x-left::after
left -20%
width 120%
.touchZone-2x-right::after
width 120%
.touchZone-2x-left.touchZone-2x-right::after
width 140%
.touchZone-2x-top::after
top -20%
height 120%
.touchZone-2x-bottom::after
height 120%
.touchZone-2x-top.touchZone-2x-bottom::after
height 120%
.touchZone-2x-all::after
top -20%
left -20%
width 140%
height 140%
@srsgores
Copy link

Very flexible 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment